border-radius
W3C has offered some new options for borders in CSS3, of which one is border-radius
.
We can now create rounded corners for our elements, just like the ones below.
border-top-left-radius
border-bottom-left-radius
border-top-right-radius
border-bottom-right-radius
border-radius can have two values, the first is the horizontal and the second is the vertical radius
border-radius: 55px 25px;
To use the shorthand and define all four corners with horizontal and vertical radii:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius
is the shorthand
border-radius: 55px 25px;
Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example:
The code for this example above is actually quite simple:
.box {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
padding: 10px;
}
The different corners can also each be handled on their own. Note: older Mozilla proprietary property names are slightly different, as it has
-moz-border-radius-topright:
as
opposed to
: and
-webkit-border-top-right-radius
border-top-right-radius:
These are handled by / should be handled by:
-moz-border-radius-topleft
/ -webkit-border-top-left-radius
/ border-top-left-radius
-moz-border-radius-topright
/ -webkit-border-top-right-radius
/ border-top-left-radius
-moz-border-radius-bottomleft
/ -webkit-border-bottom-left-radius
/ border-top-left-radius
-moz-border-radius-bottomright
/ -webkit-border-bottom-right-radius
/ border-top-left-radius
http://www.css3.info/modules/compatibility-table-backgrounds-and-borders-module/
The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10).
based on: http://www.css3.info/preview/rounded-border/
http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/