Делаю пагинацию, заметил, что края у кнопок получаются какими-то рваными, неровными. Вот пример (первый вариант - то, как оно выглядит у меня, второй - то как по идее должно быть):
* {
box-sizing: border-box;
}
.wrapper {
width: 100px;
margin: 100px auto;
}
.block {
width: 30px;
height: 30px;
border: 1px solid #5f5f5f;
border-radius: 100%;
}
.block1 {
position: relative;
width: 30px;
height: 30px;
margin-top: 20px;
background: #5f5f5f;
border-radius: 100%;
}
.block1:after {
content: '';
position: absolute;
width: 28px;
height: 28px;
top: 1px;
left: 1px;
background: #fff;
border-radius: 100%;
}
<div class="wrapper">
<div class="block">
</div>
<div class="block1">
</div>
</div>
У кого какие мысли на этот счет? Прошу помочь.