We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

Quick Code Snippet: Simple CSS3 Circles

Coding a CSS Circle

The code snippet to create the circle looks like this.

[code type=css]
.your-class {
background-color: #000;
height: 100px;
-webkit-border-radius: 50px;
width: 100px;

Simply assign a width and height of the same dimensions, then simply set the border radius to half of that of the width and height.

Sadly the code snippet only works in Chrome and Safari. If your using Internet Explorer you will see a square.


Thanks for taking part in this article, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.