To set media queries for different CSS style rules, you can try to run the following code −ExampleLive Demo                    body {             background-color: lightpink;          }          @media screen and (max-width: 420px) {             body {                background-color: lightblue;             }          }                     If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color    

Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles, and tabs).Let us see what is a responsive web design:

Media queries are for different style rules for different size devices such as mobiles, desktops, etc. You can try to run the following code to implement media queries with CSS3 − Example Live Demo body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightblue; } } If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color

Box-sizing property is used to change the height and width of the element. Since CSS2, the box property has worked like as shown below −width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's boxExampleTo understand the box-sizing property, let us see an example:Live Demo                    .div1 {             width: 300px;             height: 100px;             border: 1px solid blue;             box-sizing: border-box;          }          .div2 {             width: 300px;             height: 100px;             padding: 50px;             border: 1px solid red;             box-sizing: border-box;          }                     TutorialsPoint.com       TutorialsPoint.com    

Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property.CSS2 sizing propertyLive Demo                    .div1 {             width: 200px;             height: 100px;             border: 1px solid green;           }          .div2 {             width: 200px;             height: 100px;             padding: 50px;             border: 1px solid pink;          }                     TutorialsPoint.com       TutorialsPoint.com     CSS3 box-sizing propertyLive Demo                    .div1 {             width: 300px;             height: 100px;             border: 1px solid blue;             box-sizing: border-box;          }          .div2 {             width: 300px;             height: 100px;             padding: 50px;             border: 1px solid red;             box-sizing: border-box;          }                     TutorialsPoint.com       TutorialsPoint.com    

Outline means to draw a line around the element at the outside of the border.ExampleYou can try to run the following code to implement the CSS3 outline-offset property −Live Demo                    div {             margin: 20px;             padding: 10px;             width: 300px;             height: 100px;             border: 5px solid pink;             outline: 5px solid green;             outline-offset: 15px;          }                      TutorialsPoint    

The CSS3 resize property is having three common values as shown below −horizontalverticalbothExampleUsing both the values in resize property in the CSS3 user interface:Live Demo                    div {             border: 2px solid;             padding: 20px;             width: 300px;             resize: both;             overflow: auto;          }                     My Website    

The border-image-repeat property is used to set the border image as rounded, repeated and stretched with CSS.ExampleYou can try to run the following code to implement the border-image-repeat property:Live Demo                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image-source: url(https://tutorialspoint.com/css/images/border.png);             border-image-repeat: round;             border-image-slice: 40;             border-image-width: 20px;          }                     This is image border example.    

The border-image-source property is used in CSS to set the image path. You can try to run the following code to set the image path − Example Live Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; } This is image border example.

CSS border-image property is used to add image border to some elements. You can try to run the following code to implement the border-image property −ExampleLive Demo                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round;          }                     This is image border example.