Опукла рамка в CSS

Вивчаємо значення ridge для властивості border-style та створюємо об'ємну опуклу рамку.

Опукла рамка в CSS

Значення ridge властивості border-style створює об'ємну рамку з ефектом опуклості. Браузер автоматично використовує світліші та темніші відтінки кольору, щоб створити тривимірний вигляд.

Для ефекту ridge рекомендується використовувати товщину рамки не менше 2–3 пікселів.

<div id="elem"></div>

#elem {
  width: 300px;
  height: 100px;

  border-width: 3px;
  border-style: ridge;
  border-color: black;
}

У результаті блок отримає об'ємну опуклу рамку чорного кольору.

❗ Важливо:

Ефект ridge добре помітний лише при товстій рамці. Якщо встановити border-width: 1px, об'ємність майже не буде видно.

Практичне завдання

📌 Завдання:

№1
Створіть блок розміром 300×100 пікселів.
Додайте йому чорну опуклу рамку товщиною 3px.

💡 Показати підказку

Використайте border-width, border-style зі значенням ridge та border-color.

✅ Показати відповідь

#elem {
  width: 300px;
  height: 100px;

  border-width: 3px;
  border-style: ridge;
  border-color: black;
}