Круглые углы на сайте с помощью CSS

Опубликовано:
Редактировалось: 1 раз — 31 мая 2023
Просмотров: 3228
+2
Голосов: 2

Стараюсь писать в блоге те вещи, о которых спрашивают. Итак круглые углы на сайте с помощью css. Вопрос достаточно простой, но помню время когда я сам спрашивал)

Итак чтобы прописать круглые углы на сайте с помощью css, надо использовать border-radius, который делает углы круглыми, или определенные его углы круглыми.

В структуре InstantCMS настройки стиля находятся в style.css в папке шаблона. Изменить углы на круглые можно как у каждого модуля, так и уодной позиции модулей. Кроме этого можно сделать круглыми, овальными или круглыми сверху или снизу модулетитлов, то есть там где находится заголовок модуля, не затрагивая остальное тело боди модуля.

Вот примеры.

Код PHP:
  1. border-radius: 15px;

Код PHP:
  1. border-radius:20px 40px;

Код PHP:
  1. border-radius:20px 40px 5px;

Код PHP:
  1. border-radius:10px 20px 30px 40px;

Комментарии (3)
MAGer #
: 0
Не забываем, что это работает не во всех браузерах... например, не работает в Эксплорере...
Letsgo #
: 0
Експлорер - вещь непредсказуемая. В остальных работает. Если человек сидит на Експлорере, думаю он мало видел ему  и квадратные пойдут.
antimind #
: 0

border-radius - это CSS3 свойство, которое поддерживается далеко не всеми браузерами, табличка по поддерживаемым версиям тут  для старых версий Firefox и Safari есть префиксы, соответственно -moz- и -webkit- IE само собой идет лесом до восьмой версии включительно. А если все таки есть желание сделать круглые углы и для старых браузеров - имеется jquery плагин.

Голосуем

Самый нужный компонент