Border Radius query

Discussion in 'CSS' started by homemadejam, Dec 21, 2011.

  1. #1
    Hey,
    On my site I'm using the border-radius feature.
    My question is, at the moment I have:

    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
    HTML:
    But this does not pass the CSS validation. It says that the -webkit-..... & -moz-border-.... property does not exist. How ever, just the default border-radius does. So do I still need the prefixes of -moz & -webkit? Or will that effect how the borders look on older browsers?

    I hope I've made sense!
    And thanks in advance,
     
    Solved! View solution.
    homemadejam, Dec 21, 2011 IP
  2. #2
    Vendor extensions (-webkit/-moz/-o/etc.) are valid CSS but will be flagged by the validator. You should include the standard 'border-radius' property for those browsers that will use it, making it easier to delete the vendor extension later on.
     
    drhowarddrfine, Dec 21, 2011 IP
  3. homemadejam

    homemadejam Well-Known Member

    Messages:
    143
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    145
    #3
    Ah great. So I should just ignore the warnings that the validator gives me then?
    Thanks,
     
    homemadejam, Dec 21, 2011 IP
  4. devilthemes

    devilthemes Member

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    CSS Validation is not work for these code

    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;

    Cuz these two are for webkit and mozilla browser prosonally. W3c does not validat these code.
     
    devilthemes, Dec 22, 2011 IP
  5. Kenneth_Da

    Kenneth_Da Active Member

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    63
    #5
    Edit :
    -webkit-border-bottom-right-radius: 15px;
     -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
    HTML:
    To
    
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottom-right: 15px;
    border-bottom-right-radius: 15px;
    
    HTML:
    Your error here : -moz-border-radius-bottomright: 15px;
     
    Kenneth_Da, Jan 1, 2012 IP
  6. mmslax2

    mmslax2 Active Member

    Messages:
    235
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    63
    #6
    Actually the reason you're getting those errors is because w3c validator isn't 100% compliant with HTML5 elements. Seeing as how border-radius is new, it causes these psuedo errors. Simply ignore them.
     
    mmslax2, Jan 2, 2012 IP