Показать Меню
falbar Закругление углов CSS3

Закругление углов при помощи CSS3

Закругление углов CSS3

Использование скруглённых углов стало распространённым явлением на современных сайтах. Полазив по интернету можно найти пару десятков старых и увидеть, как было не просто раньше решить эту задачу не используя CSS3. Сколько порой возникало проблем, когда необходимо было искать костыли или чаще всего делать самим для старых браузеров. При помощи CSS3 эта задача решается в два счета.

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

border-radius: 20px;
border-radius: 20%;

Скругленные углы

Очень просто и главное быстро. Выше был пример сокращённой записи, так же радиус можно указать для каждого из угла в отдельности в двух вариантах полном и сокращённом.

border-top-left-radius: 10px;
border-top-right-radius: 30px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 15px;

или так

border-radius: 10px 30px 15px 40px;

Скругленные углы, сокращённая запись

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

border-radius: 50px/15px;

Скругленные углов для каждой оси

Вот и всё, что я хотел рассказать в этой статье про такое полезное свойство как border-radius.

Подписаться на обновления

Комментариев еще не оставлено