Easier way to create circle div than using an image?
To create a circle in HTML, style a div
with CSS, setting equal width
and height
, and applying a border-radius
of 50%
.
This creates a solid blue circle, 100 pixels in diameter.
Multiple circle sizes using CSS
Setting up the structure
You can create multiple classes for circles having different sizes, thereby achieving scalability and reusability:
Then in your HTML, just assign the desired class name:
Compatibility across different browsers
For good-natured browsers ancestry, use vendor prefixes:
For prehistoric Internet Explorer versions, turn to CSS3 PIE, a savior enabling CSS3 properties including border-radius
.
Styling circle with pseudo-elements
Adding details inside or layering can be achieved with pseudo-elements ::before
and ::after
:
Experiment with clip-path
CSS property for circular artistry.
Visualising the circle options...
Giving your circles buddies (inline display!)
For togetherness between circles and text, bring display: inline-block
into play:
Adding the WOW factor
Shadow effects can be obtained with box-shadow
, and other funky effects with filter
:
Bringing in a splash of color
To glamorize your circles, gradients are at your service. Be it linear-gradient
or radial-gradient
for a more dynamic appeal:
Image-based circle, friend or foe?
While CSS circles have scalability and styling versatility, weigh it against complex design requirements and performance trade-offs of image files.
Was this article helpful?