
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".
Any idea about how to achieve responsive concentric circles?
I need to have a square with rounded edges, with text inside.
Thank you for this.
hi can you suggest me to make circle in dual color with half-half
http://3dpillar.com/
Works perfectly! Thank you.
Will it work in IE 8 ?
Is there a way to create a circle to fit the height and width of a browser or device with css?
Oh and also center the circle too?
Not works if i use any background image instead of solid color.