I'm having a problem on chrome (and safari) when i'm trying to create a box with a dashed border and a border radius, the border-width looks tinier.
This bug appears when the border-radius is set to 2px or more.
My code:
div {
margin: 10px;
padding: 10px;
}
.border {
border: 1px dashed black;
}
.radius-1 {
border-radius: 1px;
}
.radius-2 {
border-radius: 2px;
}
.radius-10 {
border-radius: 10px;
}<body>
<div class="border">
No radius
</div>
<div class="border radius-1">
radius 1px
</div>
<div class="border radius-2">
radius 2px
</div>
<div class="border radius-10">
radius 10px
</div>
</body>Any idea why and how can I fix this ?
Thanks :)