Why can't I make a circle with border-radius? - html

Question

* {
margin: 0;
}
div {
background-color: green;
height: 900px;
width: 50%;
margin: auto;
border-radius: 50px;
overflow: hidden;
padding: 20px;
border: 4px solid red;
box-sizing: border-box;
}
div:hover {
box-shadow: 5px 5px 5px 1px blue;
}
#media screen and (max-width:600px) {
div {
background-color: aqua;
color: red;
width: 100%;
height: 10%;
}
body {
background-color: chocolate
}
}
.divas {
background-color: yellow;
position: relative;
margin-top: 20%;
height: 300px;
border-radius: 50%;
}
<div>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . </div>
<div class="divas"></div>
Hello I would like to make a perfectly rounded circle. I tried creating it with border-radius , but it doesn't allow me to create a perfect circle. Can someone explain me why? I tried changing padding and such but it doesn't work anyways.? Thanks in advance.

Answer 1

If you want to create circle with border-radius then height and width should be same for the div which you are applying border-radius
Then only border-radius will look like circle
Example
#circle{
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
}
<div id="circle"></div>

Answer 2

For a perfect circle you need an element with the same height and width. You also only have a border-radius:50px instead of border-radius:50% defined.
* {
margin: 0;
}
div {
background-color: green;
height: 500px;
width: 500px;
margin: auto;
border-radius: 50%;
overflow: hidden;
padding: 25px 28px 28px;
text-align: center;
border: 4px solid red;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 60px;
}
div:hover {
box-shadow: 5px 5px 5px 1px blue;
}
#media screen and (max-width:600px) {
div {
background-color: aqua;
color: red;
width: 100%;
height: 10%;
}
body {
background-color: chocolate
}
}
.divas {
background-color: yellow;
position: relative;
margin-top: 20%;
height: 300px;
width: 300px;
border-radius: 50%;
}
<div>
This is text.<br> This is text. This is text. This is text. This is text. This is text.
</div>
<div class="divas"></div>

Answer 3

Div with same height and width
border-radius is half the width gives a circle.
.mycircle {
background-color: green;
height: 200px;
width: 200px;
border-radius: 100px;
}
<div class="mycircle"></div>

Answer 4

For Creating a circle in css object should have same width and height
add width:300px; to .divas class.

Answer 5

You want to create a circle with border-radius then height and width should be the same for the element which you are applying border-radius:100%
* {
margin: 0;
}
div {
background-color: green;
height: 600px;
width: 600px;
margin: auto;
border-radius: 100%;
overflow: hidden;
padding: 90px;
border: 4px solid red;
box-sizing: border-box;
}
div:hover {
box-shadow: 5px 5px 5px 1px blue;
}
#media screen and (max-width:600px) {
div {
background-color: aqua;
color: red;
width: 100%;
height: 10%;
}
body {
background-color: chocolate
}
}
.divas {
background-color: yellow;
position: relative;
margin-top: 20%;
height: 300px;
width: 300px;
border-radius: 100%;
}
<div>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . </div>
<div class="divas"></div>

Answer 6

In order to make a perfect circle, you need to set width and height equal. If you do so by CSS you need to define them both in 'px', rather than '%' since the window width & height may vary from device to device. Now set border-radius as 50%. Below is the CSS:
div {
background-color: green;
height: 900px;
width: 900px;
margin: auto;
border-radius: 50%;
overflow: hidden;
padding: 20px;
border: 4px solid red;
box-sizing: border-box;
}
In case your with is dependent on the window's width (as you have used %), you can set height equal to width using javascript. Here is how to do it.
HTML
<div></div>
JavaScript
var requiredWidth = window.innerWidth * (0.5); //window width excluding scrollbar.
var div = document.querySelector('div');
div.style.width = requiredWidth + 'px';
div.style.height = requiredWidth + 'px';
Now that you have defined height and width using javascript, set border-radius to 50% in your CSS.
CSS
div {
border-radius: 50%;
background-color: red;
}

Answer 7

Use the aspect-ratio CSS' property. Compatible with all major browsers...
.fixed-units {
width: 150px;
aspect-ratio: 1 / 1;
border: 1px solid #000;
background-color: #bada55;
border-radius: 50%;
}
.dynamic-units {
width: 50%;
aspect-ratio: 1 / 1;
border: 1px solid #000;
background-color: #daba55;
border-radius: 50%;
}
<label>For Fixed Units</label>
<div class="fixed-units"></div>
<br>
<label>For Dynamic Units</label>
<div class="dynamic-units"></div>

Answer 8

You need to use border-radius: 100% and have your height and width be equal.