Posted By

michellebracken on 08/18/11


Versions (?)

Creating Circles With Border-Radius

 / Published in: CSS

The CSS2 border-radius property can be used to create circles in all browsers that support the property. The trick is to set the height and width of the element so they’re the same and set the border-radius of the element to be half that value. border-radius is the CSS standard property

-moz-border-radius is for Mozilla based browsers like Firefox

-webkit-border-radius is for webkit based browsers like Safari and Chrome

Unfortunately none of the above will work in any current version of Internet Explorer.

  1. 1 .cirlce {
  2. 2 width: 300px;
  3. 3 height: 300px;
  4. 4 background-color: red;
  5. 5 border-radius: 150px;
  6. 6 -moz-border-radius: 150px;
  7. 7 -webkit-border-radius: 150px;
  8. 8 }

Report this snippet  

You need to login to post a comment.