размер рамки не подходит для круга

Question

У меня есть 2 divs с одинаковой границей;

div { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    border: 6px solid transparent; 
} 

Я хочу, чтобы они были кругами, поэтому я добавил радиус границы: 50%; И после этого я обнаружил, что их границы больше не соответствуют

Почему?

Answer 1

Я предполагаю, что вы пытаетесь match circles- отметил это, когда я снял border для last элемента

body { 
 
    background: #000; 
 
} 
 
body div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 6px solid transparent; 
 
    border-radius: 50%; 
 
} 
 
body .first { 
 
    border-color: cyan; 
 
} 
 
body .last { 
 
    /*border-color: #000;*/ 
 
}

<div class="first"></div> 
 
<div class="last"></div>

Я предполагаю, что это что-то делать с тем, как CSS Отрисовывает пикселей (поскольку пиксели являются дискретными единицами)

Answer 2

CSS

div#container{ 
padding-top:10px; 
padding-left: 10px; 
background:#CF0; 
width:800px; 
height:220px; 
} 

.box{ 
position:absolute; 
width:200px; 
height:200px; 
font-size:150px; 
border-radius:150px; 
border:6px dotted #0F9; 
    } 

HTML

<div id="container"> 
<div class="box"><div> 

вы можете изменить круг границы с помощью пограничного увеличения размера/уменьшения & много больше