Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Going Further

Howie Yeo
Howie Yeo
Courses Plus Student 3,639 Points

How to add circle icon to the class="number" ?

Hi guys,

can anyhow show me what is the CSS to create a circle icon around the number in the fieldset legend?

3 Answers

You can make it with a border-radius ! If you have a square with a height/width equal to 30px, add 'border-radius: 15px' to the element ! (the value has to be the half of the height/width and it has to be a square !) If your square is white and the body is white too, don't forget to add a 'border: 1px solid black' or you'll not see the circle !

Heidi Bada
Heidi Bada
14,197 Points

You can see exactly what style was applied in the workspace for the video on fieldsets. It has a lot of declarations, and you can easily modify colours and margins, etc. When things are difficult to figure out, I usually just go back to the provided .css files in workspaces where I saw techniques work for sure:

.number { background-color: #5fcf80; color: #fff; height: 30px; width: 30px; display: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-radius: 100%; }

Howie Yeo
Howie Yeo
Courses Plus Student 3,639 Points

Thanks, that made sense but something is not right... it is still showing an odd shaped circle.. Can you see any issue in my css?

* {
  box-sizing: border-box;

body {
  background: #171717;
  text-align: center;
  color: #e3e3e3;
  font-family: Nunito, Arial, sans-serif;

label {
  display: block;
  text-align: left;

fieldset {
  border: none;
  border-radius: 7px;
  background: #717171;
  margin: 30px 70px;

legend {
  float: left;
  width: 100%;
  padding: 20px;
  font-weight: bold;

.number {
  border-radius: 15px;
  width: 30px;
  height: 30px;
  background-color: #b8d130;
  font-size: 1.5em;
  color: #fff;

I think it's because of your font family, it's too big for the circle (I'm not sure), try to make the circle bigger (height: 50px; border-radius: 25px) ! And add a 'text-align: center' to place the number in the center of the circle !

Howie Yeo
Howie Yeo
Courses Plus Student 3,639 Points

Just tried with 100px (width & height) 50px border-radius, no change at all. this is so weird... FYI this number class is a span within a legend element

You can add a 'padding-left: 3px; padding-right: 3px' (change the value if it's not good, but for me it works), I think there is a better method but this one works !

You're welcome :)