Responsive CSS Circles

CSS circles are very easy to create using border-radius. In this article I share the common fixed-width code along with my responsive CSS circles, which may include text. The downside of all CSS circles is that they don't work on IE8 and below because of lack of support for border-radius. If looking for fixed-width or responsive circular buttons, take a look at CSS Round Buttons.

Fixed width CSS circles

Fixed width CSS circles are very easy to implement. Set border radius equal to 50% of the width of a square box:

.circle {
    width: 200px;
    height: 200px;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD;
}

Responsive CSS circle shapes

Responsive or variable-width CSS circles are achieved by taking advantage of padding being calculated against parent width. To create a responsive CSS circle with no text (just the shape) use:

(The following circle is set to take 25% of the width of its container. Resize the div or make the window small to see how it resizes.)

.circle {
    width: 50%;
    height:0;
    padding-bottom: 50%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD; 
}

Remember to set width = padding-bottom.

Responsive CSS circles with text

Circles are commonly used with a line of centered text. Another div is required to create this kind of circles:

(The following circle is set to take 25% of the width of its container. Resize the div or make the window small to see how it resizes.)

<div class="circle-text"><div>I'm a Circle!</div></div>

.circle-text {
	width:50%;
}
.circle-text:after {
	content: "";
	display: block;
	width: 100%;
	height:0;
	padding-bottom: 100%;
	background: #4679BD; 
	-moz-border-radius: 50%; 
	-webkit-border-radius: 50%; 
	border-radius: 50%;
}
.circle-text div {
	float:left;
	width:100%;
	padding-top:50%;
	line-height:1em;
	margin-top:-0.5em;
	text-align:center;
	color:white;
}

For the circle to work as is the text should always be limited to one line. Always set margin-top = - line-height/2. Consider hidding the circle or reducing the font-size on small viewports. If the text takes two lines it will not be vertically centered. It may also overflow the circle as it is not contained but put on top. I couldn't find a simple way to center and contain any length of text. If you have any ideas please share them below.

CSS Ovals/Ellipses

To create responsive CSS ovals, use the code above for CSS circles. Just change the padding-bottom percentage to be half of the width (eg. 50%) to get:

In the example, padding-bottom determines the length of the minor axis of the ellipse. Use values greater than 100% to make it a "standing oval".