Code Answer: How to use only CSS to round my div tag area's corners?

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?

From stackoverflow

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.

vaske : We miss that feature in browsers...;(

Zack Mulgrew : While this answer is correct I don't see how it is practical for web developers/designers today.

Brian Schmitt : See my answer below for an answer that will work today across browsers

Kibbee : 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.

Konrad Rudolph : @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.

Zack Mulgrew : 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.

Traingamer : 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.)

bgreen1989 : this also also works in Opera, fyi.:)
-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.
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.

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/

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.

Brian Schmitt : Link for trickery bullet point: http://www.cssplay.co.uk/boxes/curves.html
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/

Code Answer

Thursday, February 17, 2011

How to use only CSS to round my div tag area's corners?

0 comments:

Post a Comment

Blog Archive