title | type | tags | cover | dateModified | |
---|---|---|---|---|---|
Circle |
snippet |
|
oven-paddle |
2020-12-30 15:37:37 +0200 |
Creates a circular shape with pure CSS.
- Use
border-radius: 50%
to curve the borders of the element to create a circle. - Since a circle has the same radius at any given point, the
width
andheight
must be the same. Differing values will create an ellipse.
<div class="circle"></div>
.circle {
border-radius: 50%;
width: 32px;
height: 32px;
background: #9C27B0;
}