View Full Version : Rounded Corners with just CSS

01-02-2009, 11:38 PM
Just found this and I thought some of you may find it of interest, I know I've seen people ask about this before. It does work but support does seem a little buggy.

You probably all know of the CSS property:

-moz-border-radius: 4px;

This applies corners to elements without using images but it only works in mozilla based browsers ie Firefox.

To add support for Safari you can use:

-webkit-border-radius: 4px;

And finally and most importantly you can use the code below saved out as


with the property behavior:url(border-radius.htc);

To get rounded edges in IE 6 and 7.

Report back if you encounter any issues.

Source: www.htmlremix.com

--Do not remove this if you are using--
Auther : Remiz Rahnas
Auther URL : http://www.htmlremix.com
Published date : 2008/09/24
<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
function oncontentready(classID) {
if (!this.className.match(classID)) {
if (!document.namespaces.v) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
this.className = this.className.concat(' ', classID);
var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
this.currentStyle['moz-border-radius'] ||
this.currentStyle['border-radius']) /
Math.min(this.offsetWidth, this.offsetHeight), 1);
var strokeColor = this.currentStyle.borderColor; var strokeWeight = this.currentStyle.borderWidth; this.style.border = 'none';
var fillColor = this.currentStyle.backgroundColor; var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); this.style.background = 'transparent';
var margin = this.currentStyle.margin; this.style.margin = '0';
var styleFloat = this.currentStyle.styleFloat; this.style.styleFloat = 'none';
var clear = this.currentStyle.clear; this.style.clear = 'none';
var position = this.currentStyle.position; this.style.position = 'static';
var left = this.currentStyle.left; this.style.left = '0';
var right = this.currentStyle.right; this.style.right = '0';
var top = this.currentStyle.top; this.style.top = '0';
var bottom = this.currentStyle.bottom; this.style.bottom = '0';
var width = this.currentStyle.width; this.style.width = '100%';
var height = this.currentStyle.height; this.style.height = '100%';
this.outerHTML = '<div class="' + classID + '" style="background: transparent; border: none; padding: 0; margin: ' + margin + '; float: ' + styleFloat + '; clear: ' + clear + '; position: ' + position + '; left: ' + left + '; right: ' + right + '; top: ' + top + '; bottom: ' + bottom + '; width: ' + width + '; height: ' + height + ';"><v:roundrect arcsize="' + arcSize + '" strokecolor="' + strokeColor + '" strokeweight="' + strokeWeight + '" style="behavior: url(#default#VML); display: inline-block; width: 99%; height: 99%; antialias: true; padding: ' + strokeWeight + 'px;"><v:fill color="' + fillColor + '" src="' + fillSrc + '" type="tile" style="behavior: url(#default#VML);" />' + this.outerHTML + '</v:roundrect></div>';

01-03-2009, 04:03 PM
Here's a CSS only solution, no support for IE of course, but I can live with people using great browsers gets something extra. Notice the use of the CSS3 property 'border-radius'.
border-bottom: 1px solid #F2F1E9;
border-radius: 10px;
-moz-border-radius: 10px; /* Mozilla */
-webkit-border-radius: 10px; /* Webkit */

01-03-2009, 09:24 PM
Yes thats what I have just said Dom.

but it does include IE support.

01-04-2009, 04:27 PM
Yeah, I guess a combination of the 2 would be ultimate. Yours with the JS to include IE versions with no native support, and my CSS3 line for web standard browsers (Google Chrome etc.)

02-27-2009, 05:01 AM
How bout a clue on where to place this code for us still learning CSS?

I'm working really hard to get these roudned corners and so far it's fruitless. Have they automated this in CS4?

Any help on rounding my corners would be greatly appreciated. Here's what I have right now:

#navcontainer ul
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

#navcontainer ul li { display: inline; }

#navcontainer ul li a
text-decoration: none;
font-size: 12px;
padding: 1em 8em;
color: #3366CC;
background-color: #CCFF99;

#navcontainer ul li a:hover
color: #fff;
background-color: #369;
.style4 {font-size: 12px}

You'll notice it's not Spry, just a CSS code I picked up on. Here's a link to the actual site:



02-27-2009, 05:16 AM
follow the link and the author explains how yo use it
http://www.htmlremix.com (http://www.htmlremix.com/)

02-28-2009, 04:39 AM
I hope I won't be offending anyone here when I say that if he does in fact explain how to use it there, he doesn't do a real bang-up job doing it.

02-28-2009, 06:45 PM
Like the author said:
Do you really want an explanation for this simple 3 line css ?. I donít think so.

03-01-2009, 09:03 AM
here here.

03-01-2009, 09:12 AM
Sorry mjclementz I suppose there's the htc file to deal with. That post has changed since I wrote this, it did have a description.

Just copy and paste that code from my first post into a new document with nothing other than that code and save it as border-radius.htc

Now add this to your css, if you place the htc file in a folder reference it below in the css

If you use this in conjunction with the other code you will get rounded corners in all browsers.

Support in IE is not flawless.