Site Search

: BORDER-RADIUS Create Round Borders With CSS :

October 31

2010

With the introduction of the CSS3 border-radius style tags, web developers can now easily create rounded corner design elements that previously required a lot of intensive fiddling with itty-bitty graphics and multiple div tags. Judging by the number of websites out there that use rounded corners in a lot of their design elements (including this one), I suspect that the border-radius tag, and the rounded corners it produces on HTML elements, will be one of the most heavily used features of the new CSS3 specification.

CSS border-radius Definition

As with most style tags, you can specify the individual corner properties using the appropriate tags, or use a shorthand version that states all four corners simultaneously.

Rounded corners are created either by specifying a single border-radius style tag, or by using the individual border-<corner>-radius style tags, where <corner> indicates the usual cardinal corners of an HTML element such as bottom-left or bottom-right.

The syntax for specifying all corners at once:

border-radius: [ <length> | <percentage> ]{1, 4} [ / [ <length> | <percentage> ]{1, 4}]?

And for the individual corners:

border-<corner>-radius: [ <length> | <percentage> ][ <length> | <percentage> ]?

Again, <corner> indicates using border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

The first value is the horizontal radius of the ellipse that forms the rounded corner, and the second value is the vertical radius. Combined, the two length or percentage values of border-<corner>-radius define the radii of a quarter ellipse of the outer border’s edge.

If the vertical radius is omitted, it is assumed to be equal to the first value, i.e. the ellipse forms a circle. If either value is zero, the corner of the border is displayed as it would normally be, i.e. square.

Specifying percentages for the horizontal value is calculated based on the width of the enclosing border of the element, and similarly, the vertical value is based on the height of the enclosing border of the element.

Currently not all browsers support the border-radius styling and often you find yourself having to use browser specific tags, such as for Mozilla, to get the feature to appear, .e.g –moz-border-radius for the Firefox web browser.

Note that currently the release versions of the Mozzila browser, i.e. Firefox et al, does not follow the W3C specification for specifying a particular corner radius.

W3C Specification	Mozilla’s Implementation
`border-radius`	`-moz-border-radius`
`border-top-left-radius`	`-moz-border-radius-topleft`
`border-bottom-left-radius`	`-moz-border-radius-bottomleft`
`border-top-right-radius`	`-moz-border-radius-topright`
`border-bottom-right-radius`	`-moz-border-radius-bottomright`

As of this writing, the nightly builds of Firefox support the standard border-radius tag, but if you are targeting older versions of Firefox than that, stick with the browser specific tags in your style sheets. You should also be aware that the Mozilla implementation exhibits different behaviour when specifying the radius as percentages.

Creating The Rounded Border Edges Of An Element

The example program demonstrates how to create simple rounded corners around an HTML element.

The Steps

Define a CSS style block that:
1. Gives the <p> element background a colour that is distinguishable from the page background.
2. Ensures the border of the element will have rounded corners.
Output a short paragraph of text showing rounded borders.

The Source Code

<html>
<head>
	<style type="text/css">
		#css3_border_rounded
		{
			border-radius: 15px;
			-moz-border-radius: 15px;
			background-color: #bbb;
			margin: 8px;
			padding: 25px;
		}
	</style>
</head>
<body>
	<p id="css3_border_rounded">Demonstrate the rounded corners of the new CSS3 border-radius functionality in modern browsers that support the feature.</p>
</body>
</html>

Program Output

Demonstrate the rounded corners of the new CSS3 border-radius functionality in modern browsers that support the feature.

Results

The output ably demonstrates the new border-radius rounded corners feature applied to the <p> HTML element on modern browsers, such as Safari and Firefox, that support the feature.

If you are viewing the above program output in an older browser, say Internet Explorer 8, then the styled element just shows a regular square grey box surrounding the white text. For browsers that don’t yet currently support this part of the CSS3 standard, the rounded-corners effect looks like this:

Summary

The corner-radius style sheet tag adds a much needed feature to web page layouts that has been sorely missing until now. Without this feature web designers and programmers have to cut up images and insert multiple div tags to achieve what is a heavily used design effect on many websites.

The border-radius style tag can be used in a variety of different ways. The most obvious is specifying the size of the corner radius and applying it equally to all four corners of the HTML element’s border.

#example_1 { width: 100px; height: 100px; padding: 25px; border-radius: 15px; }

This also ensures that specifying all four corners equally would form a perfect circle if the element were small enough.

#example_2 { width: 100px; height: 100px; border-radius: 50px; }

Alternatively, the third usage is that you can specify that individual corners are rounded, but not all of them together.

#example_3 { width: 100px; height: 100px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; }

A fourth example is that you can specify a different horizontal and vertical radius which makes it look like you have uneven chamfering on the corners.

#example_4 { height: 100px; width: 100px; border-top-left-radius: 50px 25px; border-bottom-right-radius: 50px 25px; }

And you can also do something completely whacky.

#example_5 { height: 100px; width: 100px; border-radius: 50px 20px / 20px 50px; }

I can see that last element being used for chat bubbles or side bar elements.

Unfortunately if you are browsing this page on a web browser that does not support the new border-radius style tag, all you will see in my examples are square, grey boxes. Sorry.

The W3C specification for backgrounds and borders has a lot more information on how the border-radius feature works and how it interacts with other styling elements or what happens when opposite border edges overlap, e.g. left and right.

Liked This Post?

Subscribe to the RSS feed or follow me on Twitter to stay up to date!

Tags: #onz, programming

Categories: CSS3 Wisdom, Software Wisdom

: BORDER-RADIUS Create Round Borders With CSS :

CSS border-radius Definition

Creating The Rounded Border Edges Of An Element

The Steps

The Source Code

Program Output

Results

Summary

Liked This Post?

: The Social :

: Categories :

: Google Link Unit :

: Latest Posts :

: Google Link Unit :

: Interesting Posts :

: Google Link Unit :

: BORDER-RADIUS Create Round Borders With CSS :

CSS border-radius Definition

Creating The Rounded Border Edges Of An Element

The Steps

The Source Code

Program Output

Results

Summary

Posts related to CSS3 Wisdom

Liked This Post?

: The Social :

: Categories :

: Google Link Unit :

: Latest Posts :

: Google Link Unit :

: Interesting Posts :

: Google Link Unit :