Posted By

LeeRJohnson on 11/02/08


Tagged

css corners border ROUNDED CSS3 radius


Versions (?)

Who likes this?

14 people have marked this snippet as a favorite

meetneps
zewwieqa
AzizLight
traktorist
joaosalless
kristinafloyd
wizard04
caruso_g
jmiller
adambundy
epicserve
efetisov
wirenaught
clinicdigital


Border Radius (Rounded Corners)


 / Published in: CSS
 

URL: Border Radius

Here are five simple classes for rounding all corners, and both top, right, bottom, and left corners. Get a better understanding of these properties at http://www.css3.info/border-radius-apple-vs-mozilla/.

  1. .round-all
  2. {
  3. -webkit-border-radius: 5px;
  4. -moz-border-radius: 5px;
  5. -khtml-border-radius:5px; /* make sure its proper */
  6. border-radius: 5px;
  7. }
  8. .round-top
  9. {
  10. -webkit-border-top-right-radius:5px;
  11. -webkit-border-top-left-radius: 5px;
  12. -moz-border-radius: 5px 5px 0 0;
  13. -khtml-border-radius:5px 5px 0 0; /* make sure its proper */
  14. border-radius: 5px 5px 0 0;
  15. }
  16. .round-right
  17. {
  18. -webkit-border-top-right-radius: 5px;
  19. -webkit-border-bottom-right-radius: 5px;
  20. -moz-border-radius:0 5px 5px 0;
  21. -khtml-border-radius:0 5px 5px 0; /* make sure its proper */
  22. border-radius:0 5px 5px 0;
  23. }
  24. .round-bottom
  25. {
  26. -webkit-border-bottom-right-radius: 5px;
  27. -webkit-border-bottom-left-radius: 5px;
  28. -moz-border-radius:0 0 5px 5px;
  29. -khtml-border-radius: 0 0 5px 5px; /* make sure its proper */
  30. border-radius: 0 0 5px 5px;
  31. }
  32. .round-left
  33. {
  34. -webkit-border-top-left-radius: 5px;
  35. -webkit-border-bottom-left-radius: 5px;
  36. -moz-border-radius: 5px 0 0 5px;
  37. -khtml-border-radius: 0 5px 5px 0; /* make sure its proper */
  38. border-radius: 5px 0 0 5px;
  39. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jmiller on August 2, 2012

.round-all { -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .round-top { -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius: 5px 5px 0 0; -khtml-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .round-right { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .round-bottom { -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .round-left { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 5px 0 0 5px; -khtml-border-radius: 0 5px 5px 0; border-radius: 5px 0 0 5px; }

You need to login to post a comment.