Inset Border-Radius с помощью CSS3

В CSS3 достижение inset border-radius, при котором углы изогнуты внутрь, а не наружу, может быть сложной задачей без использования изображений. Однако есть умное решение, использующее градиенты CSS3.

Гениальный подход Леи Веру включает в себя создание серии прозрачных градиентов с кривыми, создающих иллюзию вставки border-radius. Точно расположив эти градиенты, вы можете добиться желаемого эффекта закругленных углов.

Ее код CSS, как показано ниже, определяет пользовательский класс для элемента с желаемым врезным радиусом границы:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

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