b r a y d e n . o r g / Software

This Web

All Webs

brayden.org

Books RSS

Random RSS

Software RSS

Other

Rounded corners in CSS (thanks to Paul for the links), including a very easy way to do it for gecko browsers.

Rounded Corners in CSS

Paul:Main/WebHome found a nice tutorial on making rounded corners for navigation tabs, using CSS. For the general case you have to use images, but it turns out that there is a very easy way to get rounded corners on anything in gecko browsers. Here's an example (click on the image for a full-size view):

Notice that the button, the box surrounding the table of contents, and the boxes surrounding the content and navigation sections all have rounded corners. The style for this is really simple:

-moz-border-radius: 10px 10px 10px 10px;

The 4 numbers refer to UL, UR, LL, and LR corners, and the value is the curve radius. It seems you can apply this style to anything in the CSS box model.

-- DaleBrayden - 18 Sep 2003