Advanced Search

CSS 3 PROPER BORDER RADIUS USAGE

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*Proper rounded corners for Gecko(Firefox) */
  2. -moz-border-radius:8px;
  3. /*Proper rounded corners for Webkit(Safari, Chrome) */
  4. -webkit-border-radius:8px;
  5. /*Proper rounded corners for KHTML, Webcore (Konquerer, etc.) */
  6. -khtml-border-radius:8px;
  7. /*Use graceful degradation for time when browser specific properties are phased out  */
  8. border-radius:8px;
  9.  
  10. /* Setting different corner values, Safari doesn't support shorthand values */
  11. -webkit-border-top-left-radius:5px;
  12. -webkit-border-top-right-radius:5px;
  13. -webkit-border-bottom-left-radius:0;
  14. -webkit-border-bottom-right-radius:0;
  15. /*Use graceful degradation for time when browser specific properties are phased out  */
  16. border-bottom-right-radius:0;
  17. border-bottom-left-radius:0;
  18.  
  19. /*Otherwise use shorthand */
  20. -moz-border-radius:5px 5px 0 0;
  21. border-radius:5px 5px 0 0;
  22.  
  23. /* Btw, F you IE! */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.