Рада CSS: краще скруглення кутів

13

Від автора: всі ми застосовували у своєму дизайні border-radius для заокруглення кутів зображень, div ів, nav’ів і т. д… Але чи помічали ви, що відбувається, коли до елементу з радіусом додається товста рамка?

Як відомо з моєї статті Заглиблюємося в CSS, закруглені кути в border-radius формуються з радіуса чверті кола.

Рада CSS: краще скруглення кутів

Четверті частини кожного кола формують закруглені кути елемента.

Коли об’єднуються товсті рамки

При об’єднанні border-radius з широким border-width виникає невелика проблемка. У наступного зображення, наприклад, значення радіуса дорівнює двом значенням товщини рамки.

.mike {
border-radius: 12px;
border: 6px solid crimson;
}

Рада CSS: краще скруглення кутів

Поки немає проблем.

Але якщо встановити значення border-width більше border-radius, ми втратимо округлені кути – нашого краю зображення стануть квадратними.

.mike {
border-radius: 12px;
border: 14px solid crimson;
}

Рада CSS: краще скруглення кутів

Рамка стає ширше, а кути зображення – квадратними.

Чому так відбувається?

Це з-за того, що насправді border-radius надає форму зовнішньої частини рамки — не внутрішньою. Обрис внутрішнього радіуса визначається значенням border-radius мінус товщина рамки. Це відбивається на внутрішньому радіусі, який зазвичай менше зовнішнього.

Так що, якщо значення ширини рамки border-width більше border-radius, ми бачимо ефект чверті радіусу, що з’єднує дві рамки, які товщі самого радіуса. Зверніть увагу на квадратний внутрішній радіус:

Рада CSS: краще скруглення кутів

Щоб обидва радіусу були пропорційними, нам знадобиться підігнати значення радіуса приблизно до подвійній ширині рамки, або сумі ширини border-width і радіусу рамки border-radius.

.mike {
border-radius: 26px;
border: 14px solid crimson;
}

Рада CSS: краще скруглення кутів

При зміні значення border-radius до 26px ми отримуємо назад свої закруглені кути зображення.

Метод Box-shadow

При утворенні тіні блоку тінь слід за радіусом рамки елемента. Пам’ятаючи про це, можна використовувати значення додаткового розширення box-shadow для створення того, що виглядає в точності як рамка.

Розширений радіус встановлює розтягнутий інтервал тіні блоку. Якщо встановити офсети і розмиття на 0, певне значення розширення сформує навколо елемента чітку рамку.

.mike {
border-radius: 12px;
box-shadow: 0 0 0 14px crimson;
}

Результат виглядає в точності як приклад зі стилем рамки. Але тепер нам не потрібно турбуватися про зростання border-radius кожен раз при збільшенні ширини рамки, тому що розширене значення піде за радіусом.

Рада CSS: краще скруглення кутів

Застосування змінних Sass

Якщо ми використовуємо препроцесор типу Sass, то для ширини та радіусу рамки можна створити змінні, потім застосувати просту математичну операцію, яка пропорційно сформує радіус.

$border-width: 14px;
$radius: $border-width*1.9;
.mike {
border: $border-width solid crimson;
border-radius: $radius;
}

Висновок

Повинен попередити вас щодо зазначеного тут методу box-shadow. Так як тіні блоку не є частиною блочної моделі елемента, фальшиві рамки перекривають частини інших вбудованих чи «плавають» елементів, тому знадобиться компенсувати їх за допомогою додаткових полів. Тіні блоку CSS підтримуються у всіх останніх браузерах, включаючи IE9+.