CSS-радиус границы не изгибается одинаково на всех сторонах поля

Question

Может кто-нибудь сказать мне, почему, если я использую border-radius: 10px, он не округляет все края одинаково?

#portfolio1
{

    background-image:url("images/bg.png");
    background-repeat: none;

    height: 150px;

    width: 300px;
    float: left;
    margin-top:10px;
    margin-bottom:0px;
    margin-left:10px;
    margin-right:10px;  
    border-radius: 10px;
    /*border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;*/
    /*-webkit-border-radius: 20px;*/
}

Обратите внимание, я прокомментировал несколько строк CSS, где я былпробовать разные вещи.Мне кажется, что если я для отдельных значений границ для левого и правого краев будет разным, это будет выглядеть нормально, но все равно что-то не так с ним.

Также то же самое с веб-набором.Я использую Chrome, пробовал и Firefox, но получил ту же проблему.Может ли это быть связано со значениями маржи, которые я использую?Также у меня есть портфолио1, портфолио2 и портфолио3, которые очень похожи, но при отображении на моей веб-странице я использую каждый из них дважды ..... Если это имеет значение.

Спасибо за помощь.

Answer 1

Если вы хотите сделать все ребра округлыми в 10px, вам не нужно, чтобы это было настолько сложно (указав topright, topleft и т. Д.)

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Вот оченьполезный инструмент, который вы можете использовать.