Rounded Corners Without Images! - CSS Tutorials

Rounded Corners Without Images! CSS code for corner radius (Moz Only) Rate Topic:

#1 Speechist

D.I.C Head

Reputation: 1

Posts: 97
Joined: 02-December 04

Posted 25 February 2006 - 12:58 AM

There is a cool way to get rounded corners on your containers (DIV or whatever) of almost any size/dimension (radius) without using a single image. The good folks at Mozilla have provided us support for this CSS standard (sorry, IE hasn't caught up to this yet, and I'm not sure IE7 will either...if someone has newer info on this, please post).

The code is actually painfully simple. Just define the amount of radius you want for a given corner of a container's style declaration:

#inner {
	width:200px;
	float:left;
	margin-right:2%;
	border:3px solid #D6D6C2;
	background:#E0E9F8;
	padding: 3px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	-moz-border-radius: 15px 0 15px 0;
}

Of course in the

<body>

you would attach the #inner declaration to a DIV:

<div id="inner">Here is some content</div>

or other container element.

In this instance, we've defined an ID declaration called "inner" with a certain width, floated it left, gave it a bit of a margin all around, a border, padding and a font. But if you look closely at the last item, you'll notice a definition for the amount of radius for the border. The convention here for the 4 numbers is: upper-left, upper-right, lower-right, lower-left. In this case, we've got a nice 15px radius on the upper-left and lower-right corners. Cool! To see this in action, take a look at the following page:

RRHS B & E Academy

Be sure you're looking at this in Firefox to see the effect. In IE, it just ignores the code and renders nice square corners. Very imaginitive Bill.

Anyway, have fun with this and keep hoping IE will catch up some day!

This post has been edited by Speechist: 25 February 2006 - 02:13 AM

Is This A Good Question/Topic? 0

Replies To: Rounded Corners Without Images!

#2 im@geek

D.I.C Head

Reputation: 2

Posts: 94
Joined: 18-February 05

Posted 20 March 2006 - 05:59 PM

Will this work with Safari?

Was This Post Helpful? 0

#3 im@geek

D.I.C Head

Reputation: 2

Posts: 94
Joined: 18-February 05

Post icon Posted 20 March 2006 - 06:01 PM

I answered my own question, Yes this does work with safari!

Was This Post Helpful? 0

#4 44corners

D.I.C Head

Reputation: 1

Posts: 243
Joined: 22-February 06

Posted 25 March 2006 - 02:23 PM

Speechist, on 25 Feb, 2006 - 04:50 AM, said:

Be sure you're looking at this in Firefox to see the effect. In IE, it just ignores the code and renders nice square corners. Very imaginitive Bill.

Anyway, have fun with this and keep hoping IE will catch up some day!

Nice!

I am all for cross-browser compatibility but instead I'm going hope that IE maintains its Fischer-Price "My first Browser" status...and feel safe in the knowledge that more and more people are beginning to realise this.

EDIT: At least mozilla use "-moz-" as a prefix for all their proprietary CSS properties and values, which follows the W3C's standards. But of course, IE doesn't adhere to this - Microsoft it seems choose to name their vendor specific tags anything they feel like :angry:

For a few more mozilla ones, and how they're supported, check out:
http://www.blooberry...sextensions.htm

...roll on CSS3

This post has been edited by danielle_1_uk: 25 March 2006 - 02:34 PM

Was This Post Helpful? 1

#5 michelle@urban

D.I.C Regular

Reputation: 1

Posts: 309
Joined: 09-July 05

Posted 25 March 2006 - 02:43 PM

danielle_1_uk, on 25 Mar, 2006 - 09:15 PM, said:

I am all for cross-browser compatibility but instead I'm going hope that IE maintains its Fischer-Price "My first Browser" status...and feel safe in the knowledge that more and more people are beginning to realise this.

I sure hope so! The whole cross compatibility thing between IE and Firefox from a graphics point of view is just a pain in the arse, is there anyway to make them view the page the same way? NO! Arghhhh.

Down with IE

Was This Post Helpful? 0

#6 Arbitrator

D.I.C Addict

Reputation: 37

Posts: 525
Joined: 26-January 05

Posted 05 June 2006 - 11:10 PM

The caveat to using this property is that any background image you use will not be rounded by this property; the background will still have the normal 90 degree angular corners that you're used to except that it'll look out of place with the rounded corners. This effectively limits you to using a solid color background, a transparent background, or a pre-built image to match the current rounded borders. Also, you need to specify padding that exceeds the space subtracted from the corners or your box contents will overlap the border in this area.

It should also be noted that this is a Mozilla-specific CSS property. As such it should work in any Mozilla-based browser such as Firefox and Netscape. If it works in Safari, that must be based on Mozilla as well.

The property is based on the W3C's CSS3 Backgrounds and Borders Module: Border Radius which is currently in draft status, so you can't blame Internet Explorer for not supporting it. Browsers aren't required to support specifications until they reach the status of "recommendation". Also note that the Mozilla implementation doesn't actually match the specification either.

Of course, this code shouldn't really hurt anything so there shouldn't be any problems using it as long as you keep in mind that only Mozilla users will see it.

Was This Post Helpful? 0