i want to create a div with background color red and completely circular in shape
How can i do that?
Css or jquery both can be used
This question is related to
css
css-shapes
Use a border-radius property of 50%.
So for example:
.example-div {
border-radius: 50%
}
By using a border-radius of 50% you can make a circle. Here is an example:
CSS:
#exampleCircle{
width: 500px;
height: 500px;
background: red;
border-radius: 50%;
}
HTML:
<div id = "exampleCircle"></div>
HTML div
elements, unlike SVG circle
primitives, are always rectangular.
You could use round corners (i.e. CSS border-radius
) to make it look round. On square elements, a value of 50% naturally forms a circle. Use this, or even a SVG inside your HTML:
document.body.innerHTML+='<i></i>'.repeat(4);
_x000D_
i{border-radius:50%;display:inline-block;background:#F48024;}
svg {fill:#F48024;width:60px;height:60px;}
i:nth-of-type(1n){width:30px;height:30px;}
i:nth-of-type(2n){width:60px;height:60px;}
_x000D_
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="60"/>
</svg>
_x000D_
.circle {
border-radius: 50%;
width: 500px;
height: 500px;
background: red;
}
<div class="circle"></div>
see this FIDDLE
Source: Stackoverflow.com