Back in old days, when we want to create a rounded border around an image or object, we usually create 4 small rounded corner image and apply the corner by using css manually. With the new feature of CSS3, this is no longer needed, it is so easy and with couple css3 lines, the rounded corners are beautifully crafted.
CSS3 Border Corners Example
1. Applying 10px border radius to all corners.
The following demo will include 10px border radius apply to each corner of the image.
Below is the css3 style sheet:
<style type="text/css"> .border-radius-all{ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome or Safari */ border-radius: 10px; /*** Alternatively you can use the 4 points which indicate 10px 10px 10px 10px Top Left, Top Right, Bottom Right, Bottom Left -moz-border-radius: 10px 10px 10px 10px; //Firefox -webkit-border-radius: 10px 10px 10px 10px; //Chrome or Safari border-radius: 10px 10px 10px 10px; ***/ } </style>
2. Second and Third examples.
The second and third examples, we will try to apply different rounded values.
<style type="text/css"> .second-example{ -moz-border-radius: 10px 40px; -webkit-border-radius: 10px 40px; border-radius: 10px 40px; /*** Alternatively you can use the 4 points which indicate 10px 40px 10px 40px Top Left, Top Right, Bottom Right, Bottom Left -moz-border-radius: 10px 40px 10px 40px; //Firefox -webkit-border-radius: 10px 40px 10px 40px; //Chrome or Safari border-radius: 10px 40px 10px 40px; ***/ } .third-example{ -moz-border-radius: 40px 10px; -webkit-border-radius: 40px 10px; border-radius: 40px 10px; /*** Alternatively you can use the 4 points which indicate 40px 10px 40px 10px Top Left, Top Right, Bottom Right, Bottom Left -moz-border-radius: 40px 10px 40px 10px; //Firefox -webkit-border-radius: 40px 10px 40px 10px; //Chrome or Safari border-radius: 40px 10px 40px 10px; ***/ } </style>
Set individual property for each border radius in CSS3.
Alternatively, if you just want to specify for a specific individual corner, you can use the following format.
<style type="text/css"> .border-radius-all{ -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } </style>