Creating circles in CSS3

Question

Evening all'

I was wondering if anyone can point me in the right direction to create circles of text in CSS3. What are your recommended resources out there? I'm building a website for my course at Uni.

Thank you is advance.

Annique

Answer 1

	.box{
			height:150px;
			width:150px; 
			background:#f1f1f1;
			border-radius:150px;
			border:1px solid #ccc;
		}

<div class="box"></div>

Answer 2

If you need them responsive:

.container {
  width: 200px;
  height: 200px;
}
.box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: red;
}

<div class="container"><div class="box"></div></div>

I've added the container <div> because SO posts won't accept 100% values without a fixed width container. But in you project you could use a fluid width container, or none at all.