PDA

View Full Version : Rounded Corners with just CSS


Ricky55
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

border-radius.htc

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>';
}
}
</script>

domedia
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 */

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

but it does include IE support.

domedia
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.)

mjclementz
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}
-->
</style>

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

envymyhealth.20m.com

Thanks!

edbr
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/)

mjclementz
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.

domedia
02-28-2009, 06:45 PM
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Like the author said:
Do you really want an explanation for this simple 3 line css ?. I donít think so.

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

Ricky55
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
behavior:url(border-radius.htc);

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

Support in IE is not flawless.