为什么我不能用 border-radius 做一个圆圈？

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

您需要使用border-radius: 100%并使您的高度和宽度相等。

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

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 8

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>