Почему фон перекрывает мои закругленные углы?

Question

Когда я использую закругленные углы CSS, они выглядят так, и это здорово:

http://www.incompetence -central.co.uk / roundedcorners-nobg.png

Но если я укажу цвет фона для элемента внутри них (в данном случае простой тег <p>), цвет фона перекрывает закругленные углы, например:

http://www.incompetence -central.co.uk / roundedcorners-bgcolor.png

Как мне сохранить мои довольно закругленные углы, не рисуя поверх них цвет фона? Я попытался указать те же закругленные углы для элемента внутри, но если я это сделаю, цвет фона не полностью заполняет пространство:

http://www.incompetence -central.co.uk / roundedcorners-hack.png

Answer 1

Не указывайте цвет фона во внутреннем элементе, а только в этом конкретном элементе (с рамкой).

Answer 2

Немного математики тоже может помочь, учитывая ширину границы.Если радиус границы равен 5px, а ширина границы равна 1px, то внутренний элемент должен использовать border-radius 4px (граница 5px - 1px).Поэкспериментируйте и посмотрите.

Answer 3

Почему бы вам не установить цвет фона внешнего элемента таким же, как у его границы? Таким образом у вас не будет маленького белого пространства по углам, как вы видите на своем изображении.

Вы никогда не получите его полностью идеальным, но можно сделать его настолько близким к идеальному, чтобы пользователи, просто просматривавшие его, не увидели разницу.