Калькулятор фолбека для corner-shape

15.05.2026 • css

Калькулятор

В дополнение к недавней статье про corner-shape и border-shape захотелось сделать инструмент, который бы решал проблему фолбека corner-shape в border-radius. Ведь если делать это в “лоб”, то визуал будет сильно отличаться.

    
.element {
    border-radius: 10px;
}

@supports (corner-shape: superellipse(2)) {
    .element {
        border-radius: 10px;
        corner-shape: superellipse(2);
    }
}
    

Объяснение

Если хочется использовать corner-shape уже сейчас, то в неподдерживаемых браузерах нужно будет использовать простой border-radius. corner-shape тоже на него опирается, однако форма может сильно отличаться.

Поэтому идея следующая: для браузеров без поддержки corner-shape используем одно значение border-radius, а для браузеров с поддержкой – другое. Значения подбираем так, чтобы они максимально соответствовали друг другу.

Конечно, полностью повторить corner-shape на border-radius нельзя, однако попробовать приблизиться вполне можно.

Почитать ещё посты