round corners CSS

[dan_t]

Hi guys,
Got a little question here.
I have a box with rounded corners, I cheated and used a white backgroud, but without the white background and doing different colors, you can see where my corners are but it still has a square appearance. I can't seem to separate the top from the bottom by floating or clearing.
Can someone help me out here?

<div class="box">
<h3>The beginning of great things</h3>
<ul>
	<li>This is the absolute</li>
    <li>best way for someone to</li>
    <li> learn and grow.</li>
    <li>Absolutely fantastic!</li>

</ul>
</div>

and here's the CSS

.box {
	margin:0;
	background:url(pnk_tmp_01_rounded_bottom.gif) no-repeat bottom left;
}

.box h3 {
	margin: 0 auto;
	background:url(pnk_tmp_01_rounded_top.gif) no-repeat top left;
	padding: 10px 20px;
}

.box ul {
	padding: 10px 15px 10px 15px;
}

.box li {
	padding: 5px 20px 5px 20px;
	list-style:none;
}

Thanks

[dan_t]

Here is a screen shot of what it looks like, if this works:confused:

Check with the following link for more options to get good rounded corners

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

[macneato]

I will teach you the best way of making rounded corners. Position your container relative, then using a sprite, define 4 corner classes and position them absolute to the container.

Might seem like alot, so here is an example

.container {position:relative}

/* begin corners */
.corners {position:absoulte; width:10px; height:10px; background: url(../images/corners.gif) no-repeat}
.top_left_corner {top:0;left:0; background-position: 0 0}
.top_right_coner {top:0;right:0; background-position:-10px 0}
.bottom_left_corner {bottom:0;left:0; background-position:0 -10px}
.bottom_right_corner {bottom:0; right:0; background-position: -10px -10px}
/* end corners */

This is how you structure it within your html

<div class="container">
<!-- begin corners -->
<div class="corners top_left_corner"></div>
<div class="corners top_right_corner"></div> 
<div class="corners bottom_left_corner"></div> 
<div class="corners bottom_right_corner"></div> 
<!-- end corners -->
<p>Copy and so forth</p>
<ul><li>LIST</li></ul>
</div>

The reason why im so for this system, is that no matter the size or height of your container, this WILL work. Which means repeatability. Less classes. Better HTML.

do you attach you corner.gif?

[macneato]

No i didnt.... no reason to.. cause you suppose to create it yourself. Nevertheless, see attached

I asked you as it is an image should work with your example, to see what was the output?. I hope you will attach the file. Thanks.

[udibagas]

try this out!

div
{
border: 1pt solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px
}

available also

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

[$urya]

You may change your css code to:

.box {
	margin:0;
	-moz-border-radius:15px;
        -khtml-border-radius:15px;
        -webkit-border-radius:15px;
         border-radius:15px;
         -moz-box-sizing:content-box;
         -webkit-box-sizing:content-box;
         -khtml-box-sizing:content-box;
          box-sizing:content-box;;

background-color:red;
}

.box h3 {
	margin: 0 auto;
	background:url(pnk_tmp_01_rounded_top.gif) no-repeat top left;
	padding: 10px 20px;
}

.box ul {
	padding: 10px 15px 10px 15px;
}

.box li {
	padding: 5px 20px 5px 20px;
	list-style:none;
}

I hope that it might help you. It works for mozilla and not on IE. Probably there is no round cornor code for IE if there is any please let me know.

Regards
Surya

[drjohn]

As well as the css methods in the last two responses, you can use javascript. This is necessary if you wish you site to look the same in IE as in firefox and other modern browsers. Because IE doesn't yet support the css required

-moz-border-radius:15px; <-- for older mozilla browsers

-khtml-border-radius:15px; <-- for older khtml browsers

-webkit-border-radius:15px; <--- for older webkit browsers

border-radius:15px; <<--- for modern browsers that understand CSS3

So you need all four lines of css to cover all the browsers that do support rounded code; both older ones with their proprietary methods and newer ones which know a little bit of css3.

For IE you need javascript (but it doesn't always work perfectly - in one design I had shadows and rounded corners to add to older IEs and they couldn't do both, just one or the other.)

There are literally hundreds of javascripts available that target only IE, so you use the css and then a bit of javascript.

I've used DD_roundies a few times, available from
http://www.dillerdesign.com/experiment/DD_roundies/ ,
but googling on javascript for rounded corners in IE will give you many more to choose from.

Each has its strong points and weaknesses. I once found one that could even properly round the corners of divs with a background image, but got something else wrong (can't remember what it got wrong, or where it was either)

PS using the correct css and a javascript is better than using images, as with images you then need a whole stock of images for every background, you have problems with background images, and you need more html tags every time to apply the fake corners.