Is border radius valid css3?

HTML & CSS
1

Hi all

I thought that border radius was valid CSS3

If I validate on the w3 site and select CSS Level 3 in the More Options it still tells me it doesn’t exist.

Should I not use the border radius ?

untitled


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
    *{
      margin:0;
      padding:0;
    }
    #one{
      background:red;
      margin:50px;
      width:200px;
      height:200px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    }
	</style>
</head>

<body>
  <div id="one"></div>
</body>
</html>
2

That’s an error in the validator and border-radius does follow the current specs. Of course the vendor specific rules you use wont validate.

Validation is a means to an end anyway and having valid code means only that you are using code that has no errors or typos and agrees with the specification. It does not mean that you have used the code wisely or in the correct place.

It’s like trying to call a pile of bricks a house. The bricks are all perfect but they only make house when they are stacked correctly.

Whether you use advanced CSS3 features is up to you as CSS3 will likely never be completely finished but what you should ensure is that your page works well without these features from the start and then layer the extras on top.

Some people say don’t use CSS3 at all which is fair comment but I think to be realistic most modern browsers are supporting a common subsection of css3 that it is quite safe to use these common properties (border-radius etc) as long as you take care and check that you page will work without them.

3

Thanks for your reply Paul O’B

The page works without the border radius but doesn’t look as good.

4

Job Done :slight_smile:

Border-radius is one of those things that do no harm if its missing so it pretty safe typo use for modern browers and let older browsers fallback to square corners.