In a compatible and the most convenient way?
7 Answers
pure css and html? (assuming you don't mean using a images for the corners, or a background-image....)
a number of browsers support rounded borders e.g.
-moz-border-radius
-webkit-border-radius
border-radius
None of these work in IE however
(See Jeff's response here and the comments.)

- 1
- 1

- 56,385
- 11
- 85
- 79
-
-
2using javascript to make rounded corners seems like a complete waste of resources to me. And those implementations relying on canvas don't make any sense at all as the browsers supporting canvas also support rounded corners. If it's *that* important to have rounded corners, you're stuck with images. I'd recommend using the css properties listed above and accepting that it will degrade gracefully in non-supporting browsers. – Jonathan Fingland Jun 23 '09 at 00:00
-
@mike given that opera has less than 2% market share according to virtually every recent report, I highly doubt it is as big a consideration as IE, Firefox or Safari. Of course, it always depends on what browser your customers use... – Jonathan Fingland Jun 23 '09 at 09:52
-
IE supports canvas with a plugin. But I agree. Let IE have pointy corners until it supports rounded ones. – Nosredna Jun 24 '09 at 15:24
as of now rounded corners are supported in Firefox and safari through browser extension
rounded corner is a part of CSS3 specification, so if you want to implement a rounded corner using pure CSS and HTML now, it is possible only using browser extensions (-moz-border-radius for Firefox -webkit for safari)
you can also achieve the same using JavaScript plugins

- 9,331
- 2
- 22
- 22
Don't recall where I found this technique, but this page lists several similar solutions:
<html>
<head>
<title>hm</title>
<style type="text/css" media="screen">
body{
background:#000;
}
.heading{
color:#1d4b76;
padding-top:1em;
width:10em;
text-align:center;
}
.heading h2 {
font-size:2em;
padding:.2em;
margin:0;
background-color:#1e1e1e;
}
/* Rounded header */
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #1e1e1e}
b.r1{margin: 0 5 0 5px}
b.r2{margin: 0 2 0 3px}
b.r3{margin: 0 1 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 0 0 1px; height: 2px; background:#1e1e1e;}
</style>
</head>
<body>
<div class="heading">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h2>Example!</h2>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
For the site I used this on, I removed the right-hand margins to use them for right-aligned headings (b.r1{margin: 0 0 0 5px}
and so on):
Example of rounded corner http://img81.imageshack.us/img81/1796/picture4o.png

- 165,801
- 69
- 278
- 343
If images are allowed make 4 corners in the graphic program of your choice, make this the background-image of some span/div tags and align them properly via the position:absolute; in a container that is set to position:relative;. If you only want to use CSS you could basically do the same, but instead of choosing a background image every pixel have to be set. In a 5 by 5 corner you approximately need 10-12 tags for this tags. In other words approx 40 per panel which could lead to an 1 (CSS)+1(div/span)K byte overhead for one panel. Although I personally wouldn't take this approach, it is a possible and probably would work in most browsers.

- 6,161
- 2
- 27
- 29
You can use CSS3 rules:
- -khtml-border-radius: 5px; /* for Konqueror (linux browser) */
- -moz-border-radius: 5px; /* for any version of Firefox */
- -webkit-border-radius: 5px; /* for Safari and Google Chrome */
- border-radius: 5px; /* for browsers who support CSS3 */

- 1,825
- 3
- 21
- 26
Hi I recently had to overcome the same problem, A resizeable widget with rounded corners, inside border, drop shadow and a gradient background. It also has to work on all browsers (IE6 included).
Assuming you are using photoshop and look after your source files properly it is fairly easy. In total it requires 4 images (up to 7 depending on how you support IE6), these can all be sliced from the original photoshop file so its pretty easy.
Check out the link below.
http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow