Round Corner Borders Without Images?

[paulmo]

I've used rounded images to make headings and menu tabs, but how to make rounded border around content, like a form or sidebar? I'm seeing this all over the place now. Am I going to have to learn about radial CSS? Would rather not, so if that's the case, know of any good 3rd party scripts? Thanks!!

[ieuan11]

Hi use this:CSS Styles:

#div{	height:100px;	width:100px;	border:10px #000 solid;	-khtml-border-radius:5px;	-moz-border-radius:5px;	-webkit-border-radius:5px;}

HTML:

<div id="div"></div>

Enjoy =D

[paulmo]

Thanks but that's not working. PHP testing environment, IE8.

[dsonesuk]

border-radius will not work in IE, unless you use an htc file (google border-radius for IE htc), the problem is this file will only work with a all round border design, not specific corners only design.for creating image corners all around design check out http://w3schools.invisionzone.com/index.ph...amp;hl=DuNnkers

[real_illusions]

#div{ height:100px; width:100px; border:10px #000 solid; -khtml-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}I've added the CSS3 standard 'border-radius' after the vendor specific pre-fixed attributes. That way, when CSS3 does become the standard and each browser uses the standard, then the standard will be read, rather than the browser specific ones, as CSS is cascading...the last style will be used.

[paulmo]

Thanks dsonesuk, I recall having to do something similar 5 YEARS AGO!! And the one I used with JQuery isn't working with IE8. I'm amazed this isn't integrated in CSS.

[thescientist]

Thanks dsonesuk, I recall having to do something similar 5 YEARS AGO!! And the one I used with JQuery isn't working with IE8. I'm amazed this isn't integrated in CSS.

that's what CSS3 is doing/will do once there's enough support for it.

[paulmo]

So text is not over the border of a rounded image div, I'm putting an extra inline "padding" div. It works. Is this the way to go? And should I be using gif or png for fastest load?

[dsonesuk]

depends on quality of border required and transparency required, png is better for quality and transparency, but if you can get away with using gif instead use a gif.as the corner image are not that big, and the sides use repeated images, they should not be a problem.avoid matching background of images to background color, i have noticed that the color of images is rendered lighter or darker within different browsers.