Newly Added attributes in the CSS3 style, newly added attributes in the css3 Style

Newly Added attributes in the CSS3 style, newly added attributes in the css3 Style

Border-radius: Allows adding rounded corners to elements

<Style type = "text/css"> # r1 {border-radius: 25px; background: blue; padding: 20px; width: 200px; height: 150px ;} # r2 {border-radius: 25px; border: 2px solid green; padding: 20px; width: 200px; height: 150px; }# r3 {border-radius: 25px; background: url ("img/1.jpg"); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px ;} </style> 
Box-shadow: shadow
<Style type = "text/css"> # div1 {width: 200px; height: 100px; background: yellow; box-shadow: 10px 10px 5px 5px gray; /* shadow */} # div2 {width: 200px; height: 100px; background: yellow; box-shadow: 10px 10px 5px 5px inset; /* shadow inset internal shadow */} </style> 
Set multi-layer shadow
Box-shadow: 10px 10px 5px 5px gray, 15px 15px 5px 5px blue, 20px 20px 5px 5px gray;/* multi-layer shadow */
The border-image attribute is used to set the image border.
<Style type = "text/css"> div {width: 250px; padding: 10px 20px; border: 15px solid transparent;} # round {-webkit-border-image: url ("img/1.jpg") 30 round;/*-webkit is required for google browser kernel support, and round is tiled. */-o-border-image: url ("img/1.jpg") 30 round;/*-o is the prefix required by the operabrowser Kernel support */border-image: url (" img/1.jpg ") 30 30 round ;}# stretch {-webkit-border-image: url ("img/1.jpg") 30 30 stretch; /*-webkit is needed for google browser kernel support. stretch is stretched */-o-border-image: url ("img/1.jpg") 30 30 stretch; /*-o is the prefix required by the operabrowser Kernel support */border-image: url ("img/1.jpg") 30 stretch ;} </style>