WebCodeBench
PHP, CSS, HTML and other web code stuff

CSS3 How To: Create Curved Corners with Border-Radius Property

CSS3 How To: Curved Corners with Border-Radius Property

border-radius is one of the most useful CSS3 properties, though also one of the most easily over-used (um… guilty as charged!). It is particularly convenient for adding simple curved corners to coloured panels, navigation menus, and buttons. In many situations it can be used to replace background box or button images (that in the past were the most common solution to a lot of design problems), and therefore reduce the download-weight of your page.

Border-radius Syntax

When applying the same styling to all four corners the syntax is as follows:

border-radius: top, right, bottom, left;

This allows for a non-linear curve by specifying vertical and horizontal radii separately.

However, the simplest use, is to apply the same fixed radius to all corners. When doing this, Mozilla and Webkit based browsers are easily supported, using the browser specific extensions:

.curved-corners {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

When specifying a different radius for each corner, the syntax becomes slightly more complex, as it varies for the different browser extensions:

.curved-corners {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius: 5px 2px;
    border-radius: 5px 2px;
}

There is a super-convenient tool for testing different values, and also generating browser-compliant CSS code at: border-radius.com

Border-radius for Internet Explorer

IE… does not support the border-radius property, until IE9, and even then only with some caveats. You have a couple of options.

Firstly, you could live with it, apply border-radius settings as an incremental refinement that is not essential to the design of the page, and just accept that older versions of IE will display square corners. This will hopefully become less of a problem as more people upgrade.

Secondly, if you can’t live without curved corners on every browser, then there is an excellent javascript based solution at www.curvycorners.net which requires NO extra coding on your part. You simply need to include a .js file, and the script automatically picks up the curved-corner elements from your style sheet and applies some automatic magic to them for Internet Explorer. There are some occasional situations where this fails however, because it works by inserting extra tags into the document heirarchy. It all depends on how tricky you are being with your css design, perhaps heavy use of z-index properties etc, but on the whole I’ve found it very useful.

Border-radius Suggestions

Here are some examples of shapes you can create with very little effort using the border-radius property:

CSS3 border-radius examples

Here is the basic CSS code used to generate the above:

.panel {
	border: 2px solid #404040;
	background-color: #80ff40;
	height: 70px;
	width: 70px;
	display: inline-block;
	margin: 5px;
}

.curved-corners {
	border-radius: 10px;
}

.curved-swerve {
	border-radius: 20px 0 20px 0;
}

.curved-tab {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.circle {
	border-radius: 35px;
}

.curved-ends {
	border-top-left-radius:  15px 35px;
	border-top-right-radius: 15px 35px;
	border-bottom-left-radius:  15px 35px;
	border-bottom-right-radius: 15px 35px;
	width: 200px;
	height: 30px;
}

.segment {
	border-top-left-radius: 70px;
}

And the CSS can be applied to some simple DIV tags for testing:

<div class="panel"></div>
<div class="panel curved-corners"></div>
<div class="panel curved-swerve"></div>
<div class="panel curved-tab"></div>
<div class="panel circle"></div>
<div class="panel segment"></div>
<br/>
<div class="panel curved-ends"></div>

You can see that these ideas can be applied to creating shaped buttons, navigation tabs and bars, dropdown menus, feature panels, and a whole host of curvy goodness. Have fun!

This entry was posted in CSS, CSS3. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

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>

  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.