I use div tags to define areas within my web pages. I set all the obvious things like background, size, padding, etc. But it is all very square.
How can I use only CSS to round the corners?
+7
A:
You would use the border-radius property. However, this is only supported in CSS3, which no browser implements yet. If you only need it to work in a couple browsers you could use -webkit-border-radius and -moz-border-radius which would let it work in Safari and Firefox respectively.
If you are not opposed to using images. Here's s method I came up with for making rounded borders.
Kibbee
2008-11-04 17:33:30
We miss that feature in browsers...;(
vaske
2008-11-04 17:37:44
While this answer is correct I don't see how it is practical for web developers/designers today.
Zack Mulgrew
2008-11-04 18:03:43
See my answer below for an answer that will work today across browsers
Brian Schmitt
2008-11-04 18:08:57
It's practical because if you want rounded borders without images, you aren't going to get very far without inserting a lot of extra HTML into your page.
Kibbee
2008-11-04 18:17:58
@Zack: actually, it is. Many professional (and good!) web developers already use it. One example: Twitter page. Thanks to graceful degradation this isn't really an issue.
Konrad Rudolph
2008-11-04 18:41:48
Fair enough. I guess my point is that if you want something to appear rounded for everyone in today's browsers, it's not completely possible without using images or extra markup. The point is not to gracefully degrade into a rectangle -- it's to appear sexy.
Zack Mulgrew
2008-11-04 18:49:33
And, of course, your link to rounded borders on your site looks terrible in IE6 - the text is covered by the corner. (If you don't care about IE6, please ignore this comment.)
Traingamer
2008-11-04 21:53:45
this also also works in Opera, fyi.:)
bgreen1989
2009-03-11 02:48:47
+2
A:
-moz-border-radius will get you rounded corners in all versions of Firefox. More helpful info at the Sitepoint CSS Reference.
border-radius will get you rounded corners in Safari 3. More info on border-radius at the CSS 3 Spec.
Gabe Hollombe
2008-11-04 17:37:15
+2
A:
If by "only CSS" you mean "without JavaScript" then you can surely add background images with round corners to your elements. You may need extra markup in this case depending on how much flexibility you need.
Considering that you cannot use multiple background images yet, I think using a single image is the best only CSS option.
If you can use JavaScript, then you may want to check out Nifty Corners Cube. I mention this because it works even on top of images and supports transparency.
Zack Mulgrew
2008-11-04 17:51:11
+7
A:
Here is a simple HTML document to demo how to achieve it through only CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
</style>
</head>
<body>
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>
Link to Original: http://blog.yosle.com/2007/09/20/css-round-corners/
Brian Schmitt
2008-11-04 17:55:15
A:
Ask google about "css rounded corners no images" and you'll find many, many examples of how to do it.
Personally, I like the methods based on manipulating margins to draw the curve line-by-line, despite the amount of noise they produce in the page source, because they're the most flexible and can draw any shape of edge. If you're only interested in actual rounded corners (i.e., using a 90-degree circular arc), there's a much more compact solution based on some trickery with a carefully-positioned bullet.
Dave Sherohman
2008-11-04 18:30:45
Link for trickery bullet point: http://www.cssplay.co.uk/boxes/curves.html
Brian Schmitt
2008-11-04 19:15:15
A:
There's a tutorial in http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/ that explains how to set rounded borders in images. Peharps it migth be useful to you since the image is set as the background of a div. Although you will need to use other images and a javascript. The javascript code may be reduced if you use JQuery. o/
Adones Cunha
2008-11-04 18:52:45