Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

Draw a circle in CSS

Published November 01, 2014 by , category CSS

CSSCircle

How to draw a circle in CSS, with text

The round is a graphic element that regularly comes up in the web design. When we must incorporate the ideas of a designer, we often have to draw a circle with text in CSS. I'll explain how to achieve this feat in CSS.

TipoCode
TipoCode

Draw a square

First let's draw a 100x100 pixels square in CSS, we will turn it into a circle after.

HTML structure

<div class="circle">
	TipoCode
</div>

We simply need to wrap text in a <div> (or <span> HTML tag or any other) and give him a class - here "circle".

The CSS

.circle {
	margin: 10px;
	width: 100px;
	background: #3ab042;
	height: 100px;
	text-align: center;
	color: #fff;
}

You should get something like this:

TipoCode

Nothing too exciting at the moment... But you'll see, it's nearly finished .

Turn the square into a circle

To turn our square into a circle, we will round the corners. To round the corners, we use the border-radius property.

Note: some browsers require a prefix -moz- for Firefox, -webkit- for Chrome, -o- for Opera...

These are the vendor-prefixed properties offered by the relevant rendering engines. Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

And we will give it the same value as the width and height properties:

.circle {
	margin: 10px;
	width: 100px;
	background: #3ab042;
	height: 100px;
	text-align: center;
	color: #fff;
	border-radius: 100px;
}

You should finally have this result:

TipoCode

Now that our circle is drawn, we need to align the text vertically.

Align a text in a circle

To do this you have two options:

Align a one line text in a circle

To align a one line text in a circle, simply use the line-height property and give it the same value as the height from which the margin is removed:

.circle {
	margin: 10px;
	width: 100px;
	background: #3ab042;
	height: 100px;
	text-align: center;
	color: #fff;
	border-radius: 100px;
	line-height: 90px;
}

Then you get:

TipoCode

Things get a little bit more complicated if you want a text with multiple lines .

Align a multi-line text in a circle

HTML structure

<div class="circle multi-line">
	The site<br />TipoCode
</div>

The multi-line class that will allow us to differentiate our two circles is added to our structure.

CSS code

For the CSS, we are gona reset our line-height (15px) and then play with the padding-top and the height properties.

Note: the sum of padding-top and height must be equal to the width:

.circle.multi-line{
	line-height: 15px;
	height: 70px;
	padding-top: 30px;
	/* 70 + 30 = 100 */
}

You should get this:

The site
TipoCode

Of course, you'll just need to add style to your circle and your text. And you can get a beautiful vignette.

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

If you need help about this script, please leave a comment below. I reply as much as I can depending of my time, you may also get help from others.
I also offer a paid support, if you are in the need to adapt or create a script...

Leave a comment

Comments (0 comment)

No comments for the moment!