Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: DIVs and containers: CSS3 demos: Here

CSS3 Rounded Corners using border-radius

Among CSS3's handy new features is the border-radius property, which offers a clean and easy way of adding rounded corners to elements on the page. The rounded corner look can be applied to any or all four corners of an element, and even works with elements with a background image. Practically speaking border-radius is supported in FF3, Safari3, and Google Chrome, by way of vendor specific equivalent properties as they race to eventually just support border-radius. IE users (as of IE8) are out of luck at the moment unfortunately.

While the details of the official border-radius property are being worked out, the vendor equivalent properties for FF3.x, Safari 3.x, and Chrome that you can use right now are:

Safari and Chrome both use the "-webkit-" version btw. For the time being, you should define both properties to cover your bases while browsers move to support the official version. "value" in this case can be a singular value (ie: 10px) that defines the radius of the border for all 4 corners, for example:

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

This causes all 4 corners of the element to be rounded. But what if you only want select corners to get the rounded effect? Individual border radius properties lets you do that, which are:

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomright
  • -moz-border-radius-bottomleft
  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-right-radius
  • -webkit-border-bottom-left-radius

In Firefox, the -moz-border-radius property we saw at the beginning can in fact act as a shorthand property to all 4 individual border radius properties. Simply enter 4 separate values to affect each of the 4 corners. Safari unfortunately does not yet support such a shorthand. With this new found knowledge at hand, here's a link with tear shaped corners:

Dynamic Drive

#tearshape{
background: #B73A28;
padding: 3px 5px;
color: white;
font-weight: bold;
text-decoration: none;
-moz-border-radius: 9px 3px 9px 3px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;

}

Notice in Firefox, I simply use a single property to define the radiuses of all 4 corners, while in Safari, I need to also use two of the individual border radius properties.

CSS3's border-radius property plays nicely with other CSS properties such as border and even CSS3 Box Shadows. The rounded corners will follow the new edges seamlessly. In the below example, I give a DIV with a background image both rounded corners plus box shadows:

#curve{
background: url(pool.jpg);
width: 250px;
height: 120px;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;

}

Not bad with just CSS!

Code Info

Rate this code:

Date Posted: 01/01/2010

Revision History: None

Usage Terms: Click here

Your Comments (11)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 2 pages  1 2 >

Mwhahaha! 'Tis just another step in the eradication of the evil IE!!! HARHARHARRRR! If this doesn't convince you to dump IE, nothing will.
Posted by JaySkagnetti on 01/03, 11:04 AM
VERY GOOD... But I think this css command it's very high level for programmer.
Posted by ดูหนังอ& on 01/06, 11:41 AM
Really great!.. Thanks.
Posted by Riza Sirman on 01/08, 05:40 AM
Really gr8. No need to use images in your designs and reduce of file request. I wish everyone uses Firefox
Posted by Firefox on 01/08, 09:00 AM
This rocks! :) See it in action on http://www.thirdie.com
Posted by Pete Merrill on 01/09, 10:44 AM
simple and elegant tips, thanks :)
Posted by kinta on 01/14, 12:56 AM
very good nice work!!
Posted by kal on 01/17, 02:24 PM
Hello!
I am looking for a comment box like this one,
if you can help me please
let me know.
thanks
Ossie
Posted by ossie on 01/24, 08:47 PM
doesn't have any chance to work with IE8?
Posted by wildberry on 01/27, 01:22 AM
soooo, the only way that this can work in internet explorer is with transparent gifs for the corners?
Posted by robin on 01/30, 04:20 PM

Comment Pages 1 of 2 pages  1 2 >


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.