Web design: CSS circle

The tutor shows an easy trick available through CSS.

CSS is used to style elements of a web page. It can be used to change a square into a circle, by rounding the corners.

First, a square <div> element, its code below:

<div style=”display:block;margin:auto;width:15em;height:15em;background-color:IndianRed”></div>


Next, the <div> element rounded into a circle.

<div
style=”display:block;margin:auto;width:15em;height:15em;background-color:IndianRed;
border-radius:7.5em“>
</div>

The border-radius:7.5em addition is what makes the square into a circle.

I’ll be talking more about web design and CSS in coming posts:)

Source:

w3schools

w3schools

Leave a Reply