border-radius

This CSS3 property allows you to make rounded corners without going into Photoshop and adding a bunch of extra divs to your markup.

To view the full definition click here

The basic rule just specifies the corner radius:

border-radius: 10px;

You can add different numbers for each corner the numbers in order are for: top-left, top-right, bottom-right, bottom-left

border-radius: 10px 20px 30px 10px;

You can also specify  a different horizontal and vertical radius which has the effect of making the corner more elliptical. Horizontal values are before the slash. Vertical values are after the slash.

Here all four corners get 10px horizontal and 30px vertical.

border-radius: 10px / 30px;

Here each corner is addressed individuall with the four horizontal first and the four vertical after the slash

border-radius: 10px 20px 30px 10px / 20px 40px 60px 20px;

One rule of thumb I’ve noticed is that that 1px borders with border radius don’t look great. Instead either use a thicker border or you can remove the border entirely and just have a contrasting background color for the element and you will still be able to see the rounded border.

To get it to work in FireFox and Safari (and other webkit or Gecko based browsers) you have to specify some custom properties

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Border-radius.com makes this a relatively easy task (although it doesn’t allow you to specify different horizontal and vertical numbers).

Here are some more examples of various border-radius settings

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>