CSS3 Compatibility Check: border-radius and gradient

HTML & CSS
1

So, I’m working on a new site that has a lot of gradient, rounded-corner buttons… and I mean A LOT. I don’t want to have to make each and everyone one of these an image (even with a sprite sheet, it’d be huge).

So, I decided that it’d probably be okay to use some CSS3 properties.

Specifically border-radius (along with -webkit and -moz varieties) and the gradient fills (-webkit-gradient, -moz-linear-gradient) for background “images”.

I was trying to find a list of browser compatibility for these properties so I could check which browser it would work for, but I haven’t been able to find a conclusive list.

Does anyone know which browsers do and don’t like these values?

Thanks.

P.S. Here is the quick demo I threw together to test out the look first:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.btn {
	padding: 4px 8px 3px;
	color: #FFF;
	border-radius: 10px;
	background: #77a700;
	position: relative;
	z-index: 1;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.05, rgb(76,137,19)),
		color-stop(0.5, rgb(111,166,34))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(76,137,19) 5%,
		rgb(111,166,34) 50%
	);
	font-family: Myriad Pro, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/*
This little technique allows for a second border, or in my case, a border that isn't at the edge.
*/
.btn:after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: 1px;
	right: 1px;
	border: 1px solid #8ec300;
	border-radius: 11px;
	z-index: -1px;
}
</style>
</head>

<body>
<span class="btn">
	Hello
</span>
</body>
</html>
2

Hi,

Casniuse has a good list of what you can use and many of the [URL=“http://www.google.co.uk/search?q=css3+generatprs&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a”]css3 generators will supply the code in a usable fashion.

Avoid the IE gradient filters if you are using border radius as the filter kills the corners in IE9.

You will find some differences between browsers anyway and quite often you will need background-clip for webkit to stop the corner bleed.

3

Thanks!