rounded corners with CSS

box

Couldn’t find the one stop shop with complete reference for rounded corners and box shadow CSS so I created my own. The technique uses CSS3 but helps out with code for webkit, mozilla, and konqueror.

box shadow CSS

box-shadow: 3px 3px 10px #111;
-webkit-box-shadow: 3px 3px 10px #111;
-moz-box-shadow: 3px 3px 10px #111;

The box shadow takes three number values. The first is horizontal offset, the second vertical offset, and the third blur radius. The border radius is self-explanatory.

rounded corners CSS

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;

Lately I have been using this for forms, boxes, and content blocks (with or without the text) but it can be used for a bunch of other thang thangs. I like the idea of creating faux icons in CSS for things such as calendars.

No related posts.

tags: , , ,

This entry was posted on Tuesday, May 19th, 2009 at 8:59 pm and is filed under web. You can follow any responses to this entry through the comments feed. You can leave a response, or trackback from your own site.

comment yourself