# CSS rounded corners problems



## jtn3833 (Dec 29, 2000)

I'm trying to get CSS3 rounded corners to work so I've been playing with a site...

http://nortongraphics.com/serenity/index.html

I basically copy/ pasted everything from this site and started changing it up a little and now it's not working as it should.

I've run it through a validation site but I'm not sure what the errors mean:
34 .rounded_colhead Property -webkit-border-radius doesn't exist : 25px 25px
35 .rounded_colhead Property -moz-border-radius doesn't exist : 25px 25px
42 Parse Error [ gte IE 7]> /*ROUNDED CORNERS*/

when it renders in FF (3.6.10) the corners look great, except there is an extra set in the far corners of the site - these appear to be from the code for IE8 because IE renders the page with the corner images in the far corners of the page, and with a square box for the text.

it worked fine in FF at first, but not in IE, so I started tweaking it and now it doesn't look right in either.

again the page is: http://nortongraphics.com/serenity/index.html and here's the CSS:
-----------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */

body {
background-image: url(../images/background_gradiant.jpg);
background-repeat:repeat-x;
background-color:#ccccfe;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
border:0;
}

#wrapper {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;

}

/*ROUNDED CORNERS*/

.rounded_colhead
{
width: 800px;
margin: 60px auto;
color: black;
padding: 14px 20px;
/* Rounded corner stuff starts here */
background-color: white;
-webkit-border-radius: 25px; /* for Safari */
-moz-border-radius: 25px; /* for Firefox */
}



/*ROUNDED CORNERS*/
-----------------------------------------------------------------------
thanks for taking a look,
jtn


----------



## jdean (Jan 20, 2002)

For the last two errors, it looks like you are using the html commenting convention for a css file.

For the first two, the validator might not know about browser-specific extensions.


----------



## jtn3833 (Dec 29, 2000)

Right you are! Thanks for pointing out that the HTML comment lines in the CSS was a problem. I hadn't considered it - good observation.

But now - why does IE not show any rounded corners?


----------



## jdean (Jan 20, 2002)

jtn3833 said:


> But now - why does IE not show any rounded corners?


That's what happens when you comment out the IE specific styles ;-)

When you've fixed this, you may also want to fix the transparency in the rounded corner images.


----------



## jtn3833 (Dec 29, 2000)

That's what happens when you comment out the IE specific styles ;-)
--yeah, that's true, i didn't really think that one out. i thought it was supposed to switch to the css for IE on IE browsers, where did my code go wrong, i took it straight from a page on which it seemed to work fine.

When you've fixed this, you may also want to fix the transparency in the rounded corner images.
--the corners are transparent in chrome & FF, are you saying that even if i get IE working, the corners won't be transparent? that must be in the code because i'm using transparent png's.

thanks for your help,
jtn


----------



## jdean (Jan 20, 2002)

You originally had html conditional comments in your css file and that doesn't work. When you removed them, you replaced them by regular comments, which means your IE rules are always commented out. Consider using a second stylesheet with just the IE styles and use the html conditional comments to load it (or another way of looking at it is to use html conditional comments to prevent non-IE browsers from loading the IE stylesheet).

When I display your images, the corners don't appear transparent.


----------



## jtn3833 (Dec 29, 2000)

yeah, i think that's the way it's supposed to work, i must have messed up the code somewhere, i'll dig into it tonight.

i assume you're using firefox? corners look transparent to me on chrome and FF


----------



## edjon2000 (Jul 16, 2004)

Hi jtn3833 and hello to everyone else,

I haven't posted in here for a while.

I too am excited about HTML5 and CSS3 and have come across the problem of getting rounded corners to display correctly in IE quite a few times as well as numerous other really annoying aspects of IE  hovever the way I get around this is to ... well ... basically ... cheat  whilst I do have a separate CSS file for most of the IE problems like doubled margins on floated content and basic fixes for positioning and such, it doesn't solve the problem of these darned rounded corners, I could always use the 4 image method to re-create rounded corners but then you can end up in nested div hell, so, I cheat, I basically set up my web template with say header, nav, sidebar(s), footer using the standard currently acceptable CSS definitions for rounded corners e.g. -moz-border-radius-, -khtml-border-radius-, -webkit-border-radius- and view the website in firefox, then I screenshot it and load it into something like photoshop/gimp etc and slice off the top and bottom sections of the item that have the rounded corners and save those out as PNG files, so, for example if I am using a border radius of 8px I will slice off the top 10px and bottom 10px of the item with the rounded corners and include them as background images I will then slice out a 10px section in the middle of the item and include that as a background image and repeat it (repeat-y) in the CSS file, as a by-product of this it really works well to keep the height of your sidebar(s) and maincontent consistent hmm I hope this makes some sense, anyway, you can apply this method to your maincontent, headers, footers, sidebars or anything else you want rounded corners on like images logo's etc and this should display consistently across most browsers including IE 6 to 8, as I understand it IE9 beta fully supports CSS3 but time will tell.

I hope this has been of some help to you. 

Jon


----------



## edjon2000 (Jul 16, 2004)

Oh sorry, I forgot to mention, that all the sites I design, I try to make sure that they are XHTML Strict compliant, where possible.

Jon


----------



## jtn3833 (Dec 29, 2000)

okay - i think it should work now, but it's still not. i have the IE conditional code in the html and it looks great in firefox & chrome but still no rounded corners in IE.

again here's the site:
http://nortongraphics.com/serenity/index.html

here's the updated CSS-----------------------------
@charset "utf-8";
/* CSS Document */

body {
background-image: url(../images/background_gradiant.jpg);
background-repeat:repeat-x;
background-color:#ccccfe;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
border:0;
}

#wrapper {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;

}

/*ROUNDED CORNERS*/

.rounded_STYLE
{
background-color: white; /* if needed */
border: 25px solid #FFFFFF; /* if needed */
-webkit-border-radius: 25px; /* for Safari */
-moz-border-radius: 25px; /* for Firefox */
}

/*ROUNDED CORNERS*/
-----------------------------

thanks again for your help, i'm pretty sure i'm almost there,
jtn


----------

