Best/most compatible solution for rounded corners using CSS?

[torndownunit]

I am looking to make a background wrapper for a site that used rounded corners. So far while learning CSS, I have not tried this on a site. I have done background with rounded corners using just a PNG image and a fixed size. I'd like this one to have a fixed width, and a expandable (fluid?) height.

There seems to be a million techniques for doing this. Does anyone have any recommendations?

I found this huge list, http://www.smileycat.com/miaow/archives/000044.php but again there are so many options. I don't know where to start.

Thanks a lot.

 

[ChicoWeb]

I prefer the psuedo class before and after. This allows you to use very little html and css. In the past we'd do three divs, but this allows you to really streamline it.

Example I grabbed from a site we're doing now.

.module {
		background: url(/ui/public/image/layout/module.gif) repeat-y -186px 0;
		position: relative;
		width: 186px;
		margin: 0 0 20px 0;
		/* border: solid 1px #ECE7D5; */
		/* padding: 10px 0; */
		}
		.module:before {
			content: "";
			background: url(/ui/public/image/layout/module.gif) no-repeat 0 0;
			height: 10px;
			display: block;
			}
		.module:after {
			content: "";
			background: url(/ui/public/image/layout/module.gif) no-repeat -372px 0;
			height: 10px;
			line-height: 0;
			display: block;
			}

 

[design-is]

These 2 sites are reputable and trusted sources:

A List Apart
Sitepoint

But I assume the example above is more than fine

 

[Mal]

I prefer the psuedo class before and after. This allows you to use very little html and css. In the past we'd do three divs, but this allows you to really streamline it.

Example I grabbed from a site we're doing now.

.module {
		background: url(/ui/public/image/layout/module.gif) repeat-y -186px 0;
		position: relative;
		width: 186px;
		margin: 0 0 20px 0;
		/* border: solid 1px #ECE7D5; */
		/* padding: 10px 0; */
		}
		.module:before {
			content: "";
			background: url(/ui/public/image/layout/module.gif) no-repeat 0 0;
			height: 10px;
			display: block;
			}
		.module:after {
			content: "";
			background: url(/ui/public/image/layout/module.gif) no-repeat -372px 0;
			height: 10px;
			line-height: 0;
			display: block;
			}

In that example you have module.gif referenced all three times. What does that image look like?

 

[Darth.Titan]

This is a topic I've researched as well, but all methods I've seen are WAY too cumbersome. ChicoWeb, your code seems to be the most compact I've found.

Any chance you could give us a sample of the background images you're using? Obviously your code doesn't work without them, and I'd like an idea of what exactly is entailed.

 

[angelwatt]

One issue with the :before / :after method is that IE doesn't support them. If IE support isn't necessary then I would recommend using the border-radius CSS3 properties. It works for Firefox Safari, and Chrome. This article talks about it as well.

 

[ChicoWeb]

module.gif is attached.
Yes, it needs some IE love, but that's to be expected these days.

 

[torndownunit]

One issue with the :before / :after method is that IE doesn't support them. If IE support isn't necessary then I would recommend using the border-radius CSS3 properties. It works for Firefox Safari, and Chrome. This article talks about it as well.

So using this method, the worst that will happen is that the corners won't show up in EI? No major layout problems or anything?

I assume this is something newer version of EI will be supporting?

Chicoweb when you say "IE love" are you referring to all version of IE, or 6?

Thanks a lot.

 

[Mal]

So using this method, the worst that will happen is that the corners won't show up in EI? No major layout problems or anything?

I assume this is something newer version of EI will be supporting?

Chicoweb when you say "IE love" are you referring to all version of IE, or 6?

Thanks a lot.

If you're referring to the method from the link and not the :before and :after method, then the only other problem is it doesn't validate. That may not be a big deal to you, and it will be part of CSS3 (slightly modified from the -mov and -webkit versions), so it will validate then, but it's something worth noting.

jW

 

[torndownunit]

If you're referring to the method from the link and not the :before and :after method, then the only other problem is it doesn't validate. That may not be a big deal to you, and it will be part of CSS3 (slightly modified from the -mov and -webkit versions), so it will validate then, but it's something worth noting.

jW

I should have mentioned which part of the quote I was asking about. It was the "border-radius CSS3 properties" method.

Thanks for the input.

 

[angelwatt]

I should have mentioned which part of the quote I was asking about. It was the "border-radius CSS3 properties" method.

IE will simply ignore it and the element will have point corners like normal and no other weird side effects. I'm using it on parts of my site.

As far as the :before/:after for IE, IE8 is suppose to have support as quirksmode states.

 

[torndownunit]

the border radius property is great. I can't wait till more browsers display it. The page I used it on looks great in Firefox and Camino.

It's ok if it doesn't display in all browsers for this specific site. I look forward to when it does though!

When are some of these CSS3 features going to be available in all browsers?

 

[angelwatt]

When are some of these CSS3 features going to be available in all browsers?

According to this page IE8 won't be gaining it. Opera should be getting it soon from what I've read.

 

[torndownunit]

Ya I guess that would make too much sense lol.

 

[torndownunit]

I just thought I would bump this thread. I always notice methods popping up, and just curious if people are doing anything new.

I noticed quite a few javascript + css techniques. Anyone using any of these? Any input on which is the 'best'?

Also I missed this post earlier in the thread originally:

One issue with the :before / :after method is that IE doesn't support them. If IE support isn't necessary then I would recommend using the border-radius CSS3 properties. It works for Firefox Safari, and Chrome. This article talks about it as well.

This question isn't meant to be snotty, it's just a noob question. If the before/after method does not work in IE, and the CSS 3 technique works in the 3 other major browsers (and it's mentioned that it's soon to in Opera as well), why would you use that method? Wouldn't you use a method that's concentrated on working in IE? Or, a method that works in IE but can also still use the CSS 3 technique at the same time? It seems like the main issue is the simplest solution (CSS 3 technique) not working IE?

 

[splitpea]

Too much of that sort of javascript is slow, which means it's a pain in the rear for anyone on an older computer, or even a netbook.

This question isn't meant to be snotty, it's just a noob question. If the before/after method does not work in IE, and the CSS 3 technique works in the 3 other major browsers (and it's mentioned that it's soon to in Opera as well), why would you use that method? Wouldn't you use a method that's concentrated on working in IE? Or, a method that works in IE but can also still use the CSS 3 technique at the same time? It seems like the main issue is the simplest solution (CSS 3 technique) not working IE?

A few sites get very little IE traffic. And if your design is such that what IE displays is still usable, just not quite as pretty, it may be worthwhile to design for future browsers instead of the ones that you hope will be completely obsolete in 12 months. That said, I'd never depend on :before or :after for a commercial site, but it's not always a bad choice for an intranet or a personal site.

The way I see it you have three options:

1) Javascript (performance disadvantages; only works for solid color backgrounds; doesn't work for people who have JS disabled.)

2) border-radius in CSS (very clean, and degrades to square corners in IE, but only works for solid colored boxes AFAIK) or :before/:after (a bit less likely to degrade nicely, but handles complex backgrounds better)

3) background images + padding at top and bottom of boxes (depending on your markup may require extra divs; requires the creation of images for each color / pattern / width of box; PNG transparency issues in IE6 if you have a non-solid background.)

Two years ago I would have defaulted to option 3, and it's still preferable if you need pixel-perfect rendering of a design for a mainstream (i.e. largely IE-using) audience. These days option 2 is looking increasingly attractive in many contexts.

 

[angelwatt]

A note for us designers, IE9 is gaining border-radius. No idea when it will be released, but it is looking to make improvements. Currently IE9 is only a 32/100 on the Acid3 test (IE8 was 28 I think).

 

[splitpea]

A note for us designers, IE9 is gaining border-radius. No idea when it will be released, but it is looking to make improvements. Currently IE9 is only a 32/100 on the Acid3 test (IE8 was 28 I think).

Sadly, even once it's released, it'll be at least 2 years before IE 6 fades off the radar (meaning less than 5% usage share) and probably 5-7 years before IE 7 and 8 are no longer responsible for a major chunk of traffic.

Die already, IE6! Die!

 

[torndownunit]

A few sites get very little IE traffic. And if your design is such that what IE displays is still usable, just not quite as pretty, it may be worthwhile to design for future browsers instead of the ones that you hope will be completely obsolete in 12 months. That said, I'd never depend on :before or :after for a commercial site, but it's not always a bad choice for an intranet or a personal site.

That is my perspective as well. I was curious what others thought.

It came to mind because I was designing a site for a friend and he noticed the rounded corners not showing up on IE (me mainly uses Macs and Safari).

I guess the obvious downside is when I check Google Analytics reports for some of my sites, there is still a disturbing amount of people still using IE 6 . So even if IE improves in the next version, who knows how long it will be until people use it.

 

[astroot]

Here's my philosophy: I will occasionally use rounded corners (or other "pretty" stuff in CSS3 like text-shadow or whatever) that can be accomplished very easily via CSS3 to reward those users who are using up to date browsers.

A web page does not have to look exactly the same across all browsers.

 

[Cabbit]

A web page does not have to look exactly the same across all browsers.

I would add that a web page will never look the same across browsers(even firefox for mac is a little different to firefox windows). Nor will sites every look the same on different computer screens with varying resolutions, light levels and colour reproduction.

One thing you can do is make the interface of your design high contrast and easy to use. It does not matter if one person sees #FFFFFF and another sees #EEEEEE or if the border is 1px more to the left or that some users get rounded corners and others don't.

The method i go for is CSS3, i know there that about 80% of the users of my sites will have nice rounded corners and the other 20% will have square corners.

But with the CSS method when IE9 and Opera supports it, you just have to add in there border radius to the stylesheet unless everyone agrees on how border radius should be written in CSS.

As a student i am taking the approach of designing for the Web of 2010 when i will have finished my Honors Degree. So i write valid CSS 2 first then i add some CSS3 prettifiers into the mix but only once the site fully works with CSS 2 and looks somewhat nice, i do not use any images in my designs other than the logo.

 

[splitpea]

I would add that a web page will never look the same across browsers(even firefox for mac is a little different to firefox windows). Nor will sites every look the same on different computer screens with varying resolutions, light levels and colour reproduction.
...
The method i go for is CSS3, i know there that about 80% of the users of my sites will have nice rounded corners and the other 20% will have square corners.
...
As a student i am taking the approach of designing for the Web of 2010 when i will have finished my Honors Degree. So i write valid CSS 2 first then i add some CSS3 prettifiers into the mix but only once the site fully works with CSS 2 and looks somewhat nice, i do not use any images in my designs other than the logo.

Consider yourself lucky. A lot of us are coding for clients who either commission an image-heavy design or hand us one, want it to render pixel-perfect for all their users (believe it or not with about 99% of designs it's possible although time-consuming to accomplish this across IE6+, FF2+, Safari 2+ and Opera 8+ if you discount font rendering and monitor calibration issues... heck, we used to do it for IE 5.0, 5.5, and 5 for Mac. Using CSS, not tables.), and have audiences that use 75% or more IE, including about 25% IE6.

 

[Cabbit]

Consider yourself lucky. A lot of us are coding for clients who either commission an image-heavy design or hand us one, want it to render pixel-perfect for all their users (believe it or not with about 99% of designs it's possible although time-consuming to accomplish this across IE6+, FF2+, Safari 2+ and Opera 8+ if you discount font rendering and monitor calibration issues... heck, we used to do it for IE 5.0, 5.5, and 5 for Mac. Using CSS, not tables.), and have audiences that use 75% or more IE, including about 25% IE6.

Of course if the client is paying you to do that then you will go out and have test machines, user profiling, and spend a good 60% or so of your project time testing the system and testing the design.

Though not every client is so demanding thankfully, and i would be sub contracting a designer for a design heavy web application as i focus on the coding.

And for this particular scenario i believe the OP would be quite fine using CSS 3 border radius that will fall back to square corners on browsers that do not yet support border radius.

 

[splitpea]

Of course if the client is paying you to do that then you will go out and have test machines, user profiling, and spend a good 60% or so of your project time testing the system and testing the design.

Though not every client is so demanding thankfully, and i would be sub contracting a designer for a design heavy web application as i focus on the coding.

And for this particular scenario i believe the OP would be quite fine using CSS 3 border radius that will fall back to square corners on browsers that do not yet support border radius.

You're right. I'm just bitter.