In a compatible and the most convenient way?
+6
A:
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.)
Jonathan Fingland
2009-06-22 23:51:31
So a compatible version must be with javascript?if so,go ahead.
Shore
2009-06-22 23:52:44
using 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
2009-06-23 00:00:19
this also doesn't work in any version of Opera.
Mike
2009-06-23 08:53:46
@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
2009-06-23 09:52:51
IE supports canvas with a plugin. But I agree. Let IE have pointy corners until it supports rounded ones.
Nosredna
2009-06-24 15:24:05
+1
A:
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
Rony
2009-06-22 23:58:50
A:
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.
merkuro
2009-06-23 00:29:41
A:
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 */
Mike
2009-06-23 08:58:32
+1
A:
I used to have pure html and css based rounded corners without images which will work in all the browsers including ie6!. Check the link below which i use for my sites... nifty rounded corners
Webdevelopertut
2009-06-23 10:23:00
A:
http://kalsey.com/2003/07/rounded_corners_in_css/
Uses 4 small images though
Walker Argendeli
2009-06-23 16:54:53
A:
Rounded text inputs with jQuery and no images: http://www.tonyamoyal.com/blog/2009/06/23/text-inputs-with-rounded-corners-using-jquery-without-image/
Tony
2009-06-24 15:14:46
A:
dbr
2009-06-24 15:30:44
A:
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