Having rounded corners in web layout is usually a nice touch, whether it be menu tabs, boxes or whatever. Way back when the layout was done using HTML tables this could be achieved with images and a bunch of extra table cells. Ugliest solution there ever was but it worked. The last few years I have been using Javascript libraries such as NiftyCube to achieve more or less the same effect.
In CSS3 there are finally options for creating rounded corners. It is worth noting that CSS3 is still under development and that this technique only works under Firefox and Safari – but since they are the browsers I use anyway it is almost good enough for me already.
The HTML code for the box above is
<div style="width:300px;
background-color: #ddddff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 4px solid #8888ff;
padding: 10px;" >
The added options are (for the two browser families):
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
It is also possible to round only certain corners by using a combination of the following:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
-webkit-border-radius-topleft
-webkit-border-radius-topright
-webkit-border-radius-bottomleft
-webkit-border-radius-bottomright
One reply on “CSS-based rounded corners”
[…] the various browser manufacturers have enabled the features via prefixes the -moz- prefix is …CSS-based rounded corners | Martin BergekIn CSS3 there is finally options for creating rounded corners. It is still under development and […]