Tutorial - Rounded corners w/o images pure CSS

[th3fallen]

The easy part – Firefox, Safari & Chrome

It’s best to avoid hacks if at all possible, and luckily Firefox, Safari and Chrome all support rounded corners through native CSS methods. Let’s apply a border-radius of 20 pixels to everything with the class ’rounded-corners’:

.rounded-corners {
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

The first thing you might notice is that we defined the border-radius four times over. This is because current browser implementations aren’t completely refined according to W3C’s recommendations. Since each of the browsers still has its own unique idiosyncrasies, they apply prefixes such as -moz and -webkit.

In my example, -moz-border-radius is for Firefox, -webkit-border-radius is for Chrome/Safari and -khtml-border-radius is for older Konquerer browsers. Finally, the plain, old border-radius is future-proofing for whenever browsers properly support this attribute.

Applying border-radius here will round all the corners of the element, but you can also round certain corners and not others, or even use elliptical as opposed to perfectly round corners.

Rounded Corners in IE

None of the IEs support border-radius, not even IE8. When Microsoft released IE8, it’s almost as if they tried to catch up with browsers that were out when they released IE7. Don’t get me wrong, they fixed a lot and I wouldn’t trade even something small like display: table-cell for border-radius.

Fortunately, IE9 will have some CSS3 support, but until then we’ll have to use a border-radius hack in all IEs.

Although this hack is pretty fussy, I’ve gathered a couple guidelines that should help you debug any problems you may have.

First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:

.rounded-corners {
    behavior: url(/css/border-radius.htc);
    border-radius: 20px;
}

The path to border-radius.htc works differently than you may expect—unlike background-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.

That’s why it’s a good idea to avoid relative paths like I did above.

Hoops you have to jump through for IE:

* Any element with this hack needs to have position, so unless it already has a position, attach position: relative.
* It can act funny on some elements that are natively inline, even if you attach display: block, although not all the time (fun!).
* It also has issues with elements that don’t ‘have layout’. Attach zoom: 1; to get around this.
* You can only use this on elements with the same border radius applied to all their corners.
* When using this over anything translucent, a white ghost-line will stroke the rounded rectangle.
* Don’t even think about combining this with another IE hack, such as a box-shadow filter hack.

Additionally, if you try to use this hack dynamically with CSS or Javascript effects, it will give you problems if the element either doesn’t exist or has display: none or visibility: hidden (basically if it isn’t rendered on the page). With JS, you can apply the behavior: url(/css/border-radius.htc) via Javascript after you append the element to the page. When using a CSS effect like :hover, you’ll have to find a more creative way of hiding the content, such as overflow: hidden or z-index: -1; hiding an element like this will still cause the browser to render it, even if it isn’t visible to the user.

Unfortunately there are still certain drawbacks to using this hack with dynamic content, for instance there’s a flicker when changing the background color of an element with Javascript, and I haven’t found a way to change it at all using CSS’s :hover.

 

[onel0ve]

thanks man

 

[Ornlu]

hmm i dont use IE Hacks -_- just check if it looks K. And Konqueror has really less users.
i just use :-

.rounded-corners {      
-moz-border-radius: 20px;     
-webkit-border-radius: 20px;
     border-radius: 20px; }

 

[snowmanrene]

The newest versions of Opera, Safari and Chrome support the
border-radius property.

SO there's no need for the
-webkit-border-radius: 20px;
Firefox and IE are the only ones that need an extra line atm.

To prove:
I coded a simple proxy design, here's the code I used and screenshots from each browser.

#main {
    background: #fff;
    width: 590px;
    min-height: 250px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    padding: 10px;
    padding-top: 20px;
    color: #888;
    font-size: 12px;
}

#input {
    background: #e7e7e7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #9c9c9c;
    padding: 10px;
    font-size: 12px;
}

#main is the white area.
#input is the text input to type the url.

in Firefox 3.6.10
[SLIDE]http://lulzimg.com/i7/e2e346a2.png[/SLIDE]

in Google Chrome 6.0.472.63
[SLIDE]http://lulzimg.com/i7/b1626873.png[/SLIDE]

in Apple Safari 5.0.2
[SLIDE]http://lulzimg.com/i7/24efbbb1.png[/SLIDE]

in Opera 10.63
[SLIDE]http://lulzimg.com/i7/43723526.png[/SLIDE]

 

[DeLeTeD]

yea im using this on deletedism.com and tbh idc about ie users. :D

 

[Mr Happy]

I always use CSS3 things like this as much as possible. It drives me crazy seeing the people here who code PSD's and use gradients and images to do curves and gradients and other stuff you can easily achieve in code.

For example check out http://www.mechoddl.com/ which has just 4 images. Their isn't a single gradient or anything. It's all css3 gradients and curves. The site is way way faster as a result.

Even the whole navigation bar is just JS and CSS. no images in it at all.

 

[Ornlu]

The newest versions of Opera, Safari and Chrome support the
border-radius property.

But there are people with outdated browsers too