About design and nearby

Rounded Corners with CSS

Posted: September 17th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

There is the solution for rounded corners using pure CSS (very helpful for website designers, as for my mind). The CSS3 border-radius property allows to create rounded corners without images using multiple div tags. It works in Firefox, Safari/Chrome, Opera and IE9.

According to W3C Specification the ‘border-radius’ properties:
border-radius: [ <length> | <%> ] [ <length> | <%> ]
Initial: 0
Applies to: all elements
Inherited: no
Percentages: refer to corresponding dimension of the border box
Media: visual

For every browser you have to add a prefix:
-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and Chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /

You are able to play with the individual border-radius properties:
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
and set up one value (for the ’rounded’ corner) or two (for the ‘ellipsed’ one).

Here is how it looks : live example>>

Note: to make that looking the same for IE7,8 you have to apply javascript.

Share Button

Check Related Posts:

Leave a Reply

  • + seven = 14

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now