CSS Rounded Corners

Get Started
1

Hi All

I need to make a website that will have 3 tables on top of each other each with rounded corners.

Normally I would make up image upon image and make quite a complex set of tables and images but I want to avoid image issues if possible.

Does anyone know for sure if CSS rounded corners works and what the correct code is?

I have found information on this but from all the tests I have done I can’t get it working on all browser platforms; code below.

Any help would be great.

Many Thanks

mrmbarnes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>

<style>
.all-four-rounded-corners {
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-moz-border-radius: 10px;
	border-radius: 10px;
	}
</style>
	
</head>

<body>

<table width="100%">
  <tr>
    <td class='all-four-rounded-corners' style='height:120px; background-color : #6c8bc7;'>
	</td>
  </tr>
</table>

</body>
</html>
2

That rounded corner code is fine. But if you want the rounded corners on the table itself, do it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
.cnr {
width: 100%;
height: 120px;
background: #6c8bc7;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>

</head>

<body>

<table class="cnr">
<tr>
<td>cell</td><td>cell</td>
</tr>
<tr>
<td>cell</td><td>cell</td>
</tr>
</table>

</body>
</html>

Not all browsers support CSS3 rounded corners. Versions of IE 8 and under don’t. You can force it to do so by adding some JavaScript, though, so if that’s of interest, just holler.

3

Hi

Tanks for that… ironically it works on Google Chrome and Safari but not IE.

Any ideas?

4

As I said, CSS3 rounded corners (which you are using here) don’t work on IE versions 8 and under, but they work on IE9.

There are many addon solutions to making CSS rounded corners work in IE, such s this one:

CSS3 PIE: CSS3 decorations for IE

5

Yeah I saw that and I am using IE9; it came through as an update yesterday or the day before.

I will look into the other webbsite more.

Thanks

6

Hey

I have downloaded PIE and spent allot of time on it and it does not work with IE9.

Any other ideas?

7

You don’t need PIE on IE9, as IE9 understands CSS3 rounded corners. So this code will work in IE9:

border-radius: 10px;

If that isn’t working with the code you have, post your current code so we can see why.

8

Hi

That is already in the code and it doesn’t work?

Any further ideas?

9

Hm, yes, that was confusing. It turns out that the problem is the doctype. I just grabbed your original and din’t notice it has an old transitional doctype. I’ve updated the page with a modern one, and now the rounded corners work in IE9.


<!DOCTYPE html>
<html lang="en">

<head>

<title>Untitled</title>

<style type="text/css" media="all">
.cnr {
width: 100%;
height: 120px;
background: #6c8bc7;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>

</head>

<body>

<table class="cnr">
<tr>
<td>cell</td><td>cell</td>
</tr>
<tr>
<td>cell</td><td>cell</td>
</tr>
</table>

</body>
</html>