• (2 Pages)
  • +
  • 1
  • 2

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

#1 Speechist  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • 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  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • 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  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • 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  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • 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  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 1
  • View blog
  • 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 :P
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • 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
  • +
  • -

#7 MsAne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 14-February 08

Posted 12 June 2008 - 02:59 PM

wow this is real neat, theres alot of other neat things in css but ofcourse we always have the broswer compatibility issue GRRRRRRRRRRRRRRR!
Was This Post Helpful? 0
  • +
  • -

#8 shweta.honey25  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 15-September 08

Posted 14 October 2008 - 01:26 AM

hi its working on safari,firefox but not working on IE6
give reason and solution plz that why its not working
Was This Post Helpful? 0
  • +
  • -

#9 Thunderchild  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 16-December 08

Posted 18 December 2008 - 09:59 AM

Thanks this worked well for me in FF, but as been said before it doesnt work in IE7
Was This Post Helpful? 0
  • +
  • -

#10 wltrbe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-March 09

Posted 22 March 2009 - 08:56 PM

awesome.
Was This Post Helpful? 0
  • +
  • -

#11 Adryi19  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 31-March 09

Posted 31 March 2009 - 03:59 PM

Of course.. Awesome :^:
Was This Post Helpful? 0
  • +
  • -

#12 vergun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-April 09

Posted 07 April 2009 - 07:19 PM

does this work on chrome and/or opera?
Was This Post Helpful? 0
  • +
  • -

#13 ultimateweb  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 37
  • Joined: 24-May 09

Posted 27 June 2009 - 01:16 AM

This only works in mozilla,safari and IE 8 because they support CSS 3.0
Was This Post Helpful? 0
  • +
  • -

#14 Jono20201  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 179
  • Joined: 07-July 09

Posted 07 July 2009 - 11:48 AM

Microsoft will never catch up with anything!

They need to auto install Mozzila FireFox on every PC. :^:

edit:

Quote

This only works in mozilla,safari and IE 8 because they support CSS 3.0


Woops, I seem to be mistaken they have supported something!

This post has been edited by Jono20201: 07 July 2009 - 11:50 AM

Was This Post Helpful? 0
  • +
  • -

#15 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 383
  • Joined: 16-October 08

Posted 28 July 2009 - 06:30 AM

There is also a piece of Javascript that also creates rounded corners.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2