CSS Rounded Corners


Lately I have worked on a few sites that have dealt with creating rounded corners. Here I hope to direct you in a couple different ways to achieve this.

The first option is to create 3 images. You create a top image that includes the left and right corners, a middle image that contains a slice that will repeat down the box, and lastly a bottom image that contains the bottom corners. This box will expand downwards but will be limited to a specific width. You would then have these images as the background for 3 divs and have the middle one “repeat-y”.

Another option is to create an image for all four corners. Create 4 absolutely positioned divs instead a relatively positioned div. Then the top left corner would have top: -1px; left: -1px. The other corners would follow the same theory depending on where they are located.

Lastly the easiest way to create rounded corners is to use specialized CSS properties. The one downside to this is it won’t work in anything but Firefox and Safari. You would use the following CSS properties: -moz-border-radius and -webkit-border-radius.

As this was a very quick overview of these techniques – Visit CSS-Tricks.com to view a great video on this subject.

Be Sociable, Share!


Written by Brenley Dueck


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

connect with me!