Best way to do curves? (CSS/HTML/Images)

DaveOwl · 3 Mar 2011 at 01:43

Decided I want to start rounding off the edges on some of my divs and other bits and have seen various methods (now helped by CSS3 but I'm not going there yet) of how to do this.

Is there any 'best' method? At the moment the one I have seen that appears to work involves 4 divs and four corner backgrounds that do not repeat but it seems to be a fair bit of code and means I have to nest my existing divs into these four plus it isn't all that flexible when the page is resized. It also doesn't seem to work very well if I only want one rounded corner or want to do anything notable with the content in the div!

If someone could advise a method that would work fine in 99.9% of cases that would be great as I want it to look good but not have lines and lines of code every time I want a corner!

The only real code I can find so far is -

.bl_on {background: url(bl.gif) 0 100% no-repeat #000000; width: 20em}
.br_on {background: url(br.gif) 100% 100% no-repeat}
.tl_on {background: url(tl.gif) 0 0 no-repeat}
.tr_on {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

and

<div class="bl_on"><div class="br_on"><div class="tl_on"><div class="tr_on">
</div></div></div></div>

pieplough · 3 Mar 2011 at 02:34

IMO...

CSS3 border radius.. "WHAT ABOUT IE!!!" I hear you all scream!

CSS3PIE

Enabling shiny round corners in IE 6, 7, or 8. All you need to do is add this line to your css...

Code:

#.roundthing  {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
[SIZE="4"]behavior: url(PIE.htc);[/SIZE]
}

Simple.

FabienO · 3 Mar 2011 at 09:10

Liquid rounded corners can be useful.

I personally use CSS3 for personal sites because I want to push people to upgrade their browser, for professional sites, I use something IE6 compatible.

pieplough · 3 Mar 2011 at 12:04

FabienO said:
I use something IE6 compatible.

Like CSS3PIE?

sist_si · 3 Mar 2011 at 12:26

that's quite cool. any major bugs? I notice it's BETA

pieplough · 3 Mar 2011 at 13:43

sist_si said:
that's quite cool. any major bugs? I notice it's BETA

There are a couple of issues as the KNOWN ISSUES page shows. They all have workarounds though

stugoo · 3 Mar 2011 at 13:50

Using background images for corners is 2007.

I'm not going to go into the browser argument but if you are looking to not duplicate the code over and over again then why not set up a class for your container div?

CSS

Code:

.corners { 
   -moz-border-radius:5px;  /* FF*/
   -webkit-border-radius:5px; /*Safari/Chrome*/
   -ms-border-radius:5px; /*IE9 */
   border-radius:5px; /* for when everyone decides to stop using prefixes*/
 }

HTML

Code:

<div class="corners">
   <p>the corners of this div will be round! </p>
</div>

You can then apply that class to any div that you want to have rounded corners... its more HTML but less CSS....

DaveOwl · 3 Mar 2011 at 13:58

Thanks for that, both methods seem interesting. What about if you don't want all corners to be rounded, I think you can just specify each corner with these CSS3 implementations can't you?

GravyMonster · 3 Mar 2011 at 14:05

Yeah, you can specify them individually. border-radius is actually a shorthand property for border-radius: top right bottom left;

There is also border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. Specifying individual border radii it's possible to make shapes such as ovals and circles.

stugoo · 3 Mar 2011 at 14:05

yeah you have complete control over your corners using the following declarations

Code:

.classname  { 

  border-top-left-radius : 15px;	
  border-top-right-radius  : 25px;
  border-bottom-right-radius : 35px;
  border-bottom-left-radius : 45px;
}

Just need to remember that individual modern browsers need their own prefixes at the moment which is rubbish. (-ms, -moz, -webkit)

craptakular · 3 Mar 2011 at 18:10

doesn't ms ie9 just use border-radius? like Opera does.

3dcandy · 3 Mar 2011 at 18:55

Oxy said:
doesn't ms ie9 just use border-radius? like Opera does.

It does but it does a real bad job imho. I haven't checked to see if the -ms prefix makes a difference, on the site I'm working on ie 5.5 is my problem....old fashioned people who have no idea what a web site should actually look like! I even have one regular visitor with Win95 and IE3!!! FFS!

Russinating · 3 Mar 2011 at 18:59

3dcandy said:
I even have one regular visitor with Win95 and IE3!!! FFS!

Stop supporting it!

My site - which is wedding related and so probably as far away from a geek/computer whizz demographic as you can get - gets only 2% IE6 hits a month. Majority is IE8 with 20%.

If everyone stopped support they'd soon upgrade

.

craptakular · 3 Mar 2011 at 19:14

I'm new to all this web design/developing game (as I am sure you have quessed

)

I am basically making sure all my content lines up in ie6,7 & 8 and using css3 for FF, webkit and opera. IE 9 will be great as I assume most IE people will download ie9 during a win7 update...

On my second site I'm trying to use some images for gradients and stuff so at least it appears the same across browsers.

3dcandy · 3 Mar 2011 at 19:46

Russinating said:
Stop supporting it!

My site - which is wedding related and so probably as far away from a geek/computer whizz demographic as you can get - gets only 2% IE6 hits a month. Majority is IE8 with 20%.

If everyone stopped support they'd soon upgrade .

I don't....however I make sure it looks ok as I know who it is and they will NEVER update without someone actually spending hours to educate them. 87 years young ya see!

DefiantAsh · 5 Mar 2011 at 08:57

stugoo22 said:
Using background images for corners is 2007.

I'm not going to go into the browser argument but if you are looking to not duplicate the code over and over again then why not set up a class for your container div?

CSS

Code:

.corners { -moz-border-radius:5px; /* FF*/ -webkit-border-radius:5px; /*Safari/Chrome*/ -ms-border-radius:5px; /*IE9 */ border-radius:5px; /* for when everyone decides to stop using prefixes*/ }

This ^

I've only been doing web development for a few months now, and i am doing an individual assignment to create a fully functional website, but with no specialities like login details, forms etc however i will try and implement these. Already made my container layout to have rounded corners, bottom left and bottom right, however it doesnt work in IE, thats my problem. Should be sorted thought sooner or later, just a few tweaks. IE also seems to hate drop shadows as well

3dcandy · 5 Mar 2011 at 09:30

You need to tweak dropshadow's for IE, it does it totally different from the rest...as usual :-)

Edward01 · 5 Mar 2011 at 11:42

The problem is that a lot of companies still run IE6 and wont let their staff upgrade.

A lot of the sites I do for clients I haev to do for IE6 still so it looks good on their work computer.

2011 Total IE 9 IE 8 IE 7 IE 6
January 26.6 % 0.5 16.6 % 5.7 % 3.8 %

It's got such a small market share ffs

reefoid · 5 Mar 2011 at 21:57

stugoo22 said:
Just need to remember that individual modern browsers need their own prefixes at the moment which is rubbish. (-ms, -moz, -webkit)

You don't need the -webkit prefix for the latest webkit based browsers, they work fine without.

Muel · 5 Mar 2011 at 22:05

I use CSS3 and then a jQuery plugin called DDRoundies to sort it for IE.

EDIT: On production sites. On my personal site they get square corners and they're gonna like it.