CSS-based rounded corners

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.

Users of Firefox and Safari should see this text in a blueish box with rounded corners. Users of other browsers will see a box with square corners.

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 thought on “CSS-based rounded corners”

Comments are closed.