advanced code snippet search

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/.

Expand | Embed | Plain Text 
  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.