Today, when CSS3 is supported by almost all the popular browsers: Safari, Chrome, Internet Explorer, Opera, and Firefox, the approach used to make rounded corners is very easier, shorter and faster. The CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags. The Firefox requires the -moz code is to be slightly different from the official code and -webkit code.
Example:
Ceate a div which we will round the corners.
<div id="roundCorners"></div>
We should write these styles for creating the corners of an element.Let’s curve all the borders; top left, top right, botton left and bottom right.
#roundCorners {
width: 150px;
height: 100px;
border: 2px solid red;
/* CSS3 declaration */
border-top-left-radius: 20px;
/* Declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-top-left-radius: 20px;
/* Declaration for Mozilla browsers like FireFox */
-moz-border-radius-topleft: 20px;
/* Declaration for Linux browsers */
-khtml-border-top-left-radius: 20px;
border-top-right-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-khtml-border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-khtml-border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-khtml-border-bottom-right-radius: 20px;
}
Define short styles for all borders.
#roundCorners {
width: 150px;
height: 100px;
border: 2px solid red;
/* CSS3 declaration */
border-radius: 20px;
/* Declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-radius: 20px;
/* Declaration for Mozilla browsers like FireFox */
-moz-border-radius: 20px;
/* Declaration for Linux browsers */
-khtml-border-radius: 20px;
}
Thank you so much for reading, and I hoped you have learned something new.