How to create a CSS circle with border-radius

With the CSS3 property border-radius we can create perfect circles.

Basically set border-radius to 50% and then a width and height.

I've added some extra styles to make it look prettier 😉

.circle {			
	border-radius: 50%;
	
	width: 150px;
	height: 150px;	
	
	/* Extra */
	background:#a0d3ff;
	padding:20px;
	font-size: 30px;
	line-height: 70px;
	text-align: center;			
}
Code language: CSS (css)

Use the .circle class to any element:

<div class="circle">This is a CSS circle</div>
Code language: HTML, XML (xml)

Result