border-radius помехи

Question

Вот простейший блок с заокругленным бордером в 0px. Но почему от ::after есть помехи, если у него z-index меньше? Снизу на картинках 3 эксперимента:
1) ::after 200x200px background-color:white;
2) ::after 2x2px background-color:white;
3) ::after 200x200px background-color:blue

Эксперимент доказывает, что:
1) Почему-то по углам есть маленькая часть, которая рисуется, но уже скрывает псевдоэлементы;
2) Почему то афтеру до лампочки, что у него z-index меньше и он по углам оставляет свой след;
3) Почемуто бифору не удаётся закрыть по углам афтер, хотя он сплошной квадрат без заокругленных углов

Вопрос: как мне это пофиксить? У меня элемент на сайте имеет двойную анимацию смещением псевдоэлементов, но по углам эти помехи портят очень.

браузер firefox, пк.

вот code эксперимента:

body{
    background-color:black;
}
div{
    position:relative;
    content:"";
    margin:50px;
    height:200px;
    width:200px;
    border-radius:50px;
    background-color:white;
    overflow:hidden;
    border:0;
}
div::before{
    content:"";
    position:absolute;
    z-index:2;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background-color:blue;
    border:0;
}
div::after{
    content:"";
    position:absolute;
    z-index:1;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background-color:white;
    border:0;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="qb1">
    </div>
</body>
</html>

Answer 1

Решить можно, если обойтись без ::after (в моём случае ::before сделал через linear-gradient двухцветным), основной блок сделать прозрачным (спасибо за подсказки), а контент поместить в ещё один блок, который чуть меньше родителя и имеет отступ на пару пикселей от краёв. Тогда углы будут чистыми.

БЛОГ НА HUSL

border-radius помехи

Ответы (1 шт):