Round Edges with CSS

Drawing curves with CSS makes designing alot quicker. For instance, say you want to place a box with curved edges, you would traditionaly have to use images or javascript to render such an effect. With the Development of CSS 3.0, it has become possible to draw curves using only CSS in some of the mainstream browsers. The following code can be used on any css element.

Firefox CSS code

-moz-border-radius-bottomleft:4px;

-moz-border-radius-bottomright:4px;

-moz-border-radius-topleft:4px;

-moz-border-radius-topright:4px;

Safari CSS code:

-webkit-border-top-left-radius:4px;

-webkit-border-top-right-radius:4px;

-webkit-border-bottom-left-radius:4px;

-webkit-border-bottom-right-radius:4px;

Konqueror CSS code:

-khtml-border-top-left-radius:4px;

-khtml-border-top-right-radius:4px;

-khtml-border-bottom-left-radius:4px;

-khtml-border-bottom-right-radius:4px;

Working Example

In this example a div element (.box) is centered on the screen using the margin auto code. It is then told its size, width and background color. Finally the element is told to have rounded edges with a radius of 4 pixels in IE, Firefox and Konqueror using the code depicted above.

HTML code

<div class= "box"></div>

CSS code

.box {

margin: 0 auto 0 auto;

width: 100px;

height: 100px;

background-color:#000;

-moz-border-radius-topleft:4px;

-moz-border-radius-topright:4px;

-moz-border-radius-bottomleft:4px;

-moz-border-radius-bottomright:4px;

-webkit-border-top-left-radius:4px;

-webkit-border-top-right-radius:4px;

-webkit-border-bottom-left-radius:4px;

-webkit-border-bottom-right-radius:4px;

-khtml-border-top-left-radius:4px;

-khtml-border-top-right-radius:4px;

-khtml-border-bottom-left-radius:4px;

-khtml-border-bottom-right-radius:4px;

}