[css3.svg]CSS - How to draw a circle

1. Start with a square
.circle {
  display:inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid darkblue;
  
  
  
}
2. Round the corners
.circle {
  display:inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid darkblue;
  border-radius: 50%;
  
  
}

Mouse over circle for animation.

3. Add a fill color
.circle {
  display:inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid darkblue;
  border-radius: 50%;
  background-color: pink;
  
}
4. Align
.circle {
  display:inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid darkblue;
  border-radius: 50%;
  background-color: pink;
  vertical-align: bottom;
}

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath