SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is border radius valid css3 ?

    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

    Code:
    <!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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    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

    Code:
    <!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>
    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. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply Paul O'B

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    Thanks for your reply Paul O'B

    The page works without the border radius but doesn't look as good.
    Job Done

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •