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

This issue should help you : [How to draw circle in html page? - Sergey Metlov](http://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page) — Izuka, Jan 19 '16 at 22:31
hot user pic....:O...:O...however check this link http://stackoverflow.com/questions/8709291/how-to-make-circular-background-using-css — repzero, Jan 20 '16 at 01:33
Possible duplicate of [CSS Circle with border](http://stackoverflow.com/questions/33277777/css-circle-with-border) — Sebastian Brosch, Jan 20 '16 at 14:35

score 1 · Answer 1 · answered Jan 20 '16 at 14:19

1

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

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

answered Jan 20 '16 at 14:19

Head In Cloud

2,001
1
8
10

score 0 · Answer 2 · answered Jan 20 '16 at 14:22

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.

Creating circles in CSS3

2 Answers2