Як зробити закруглені кути css
Вітаю вас, дорогі читачі!
Сьогодні я розповім і покажу, як зробити закруглені кути за допомогою css. Ще зовсім недавно закруглені кути на сайтах робилися виключно за допомогою картинок, тобто потрібно було заздалегідь підготувати картинку у фотошопі або іншій аналогічній програмі, закруглити для неї кути, як вам потрібно, а потім розмістити її на сайті.
Навігація за статтею:
Але на щастя ці часи залишилися позаду і сьогодні зробити закруглені кути для будь-якого блоку, картинки, кнопки або таблиці можна за допомогою одного рядка коду CSS.
Причому ви можете закруглити кути як усі одразу, так і лише деякі, та ще й регулювати для них радіус закруглення.
Як, наприклад, тут:
Круто, чи не так?! Все це стало можливим завдяки CSS властивості border-radius.
Як закруглити кути для блоку?
Припустимо, у вас на сайті є блок з класом round-corner.
Для того щоб цей блок було краще видно, я задам йому висоту, ширину і колір фону за допомогою CSS.
А тепер для того, щоб закруглити всі кути цього блоку, нам достатньо приписати йому всього один рядок у CSS файлі або прямо в коді сторінки за допомогою спеціальних тегів або атрибутів:
де 20рх - це радіус закруглення кута (чим він більше - тим кругліше кут)
І ось що ми отримаємо в результаті:
Як закруглити кути зображення за допомогою CSS?
Такий же фокус можна зробити і для картинки, кнопки і будь-якого елемента на вашому сайті. Для того, щоб закруглити кути в CSS, потрібно або прописати для цього елемента клас, для якого задана властивість border-radius, або обчислити клас блоку, всередині якого розташований потрібний елемент (у нашому випадку це картинка), а потім прописати тегцього елемента, після чого у фігурних дужках прописати йому все також CSS властивість border-radius.