Вставка радиуса границы с использованием градиентов CSS3

Достижение вставки радиуса границы без изображений возможно с помощью градиентов CSS3. Этот подход предполагает наложение нескольких прозрачных радиальных градиентов для создания иллюзии изогнутой внутрь границы вокруг элемента.

В следующем коде CSS используется решение Леи Веру для создания вставки border-radius с использованием градиентов:

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 и градиентов, которые могут поддерживаться не всеми старыми браузерами и требуют прогрессивное улучшение или альтернативный вариант на основе изображений для старых браузеров, не поддерживающих градиенты.