Заокруглені кути CSS3
Всім привіт, в цій статті я розкажу Вам, як зробити заокруглені кути в CSS3 через властивість "border-radius".
Зараз створимо просту сторінку з розміткою. Одразу наведу приклад:
<html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div class="container"></div> </body> </html>
Тепер пропишемо стилі:
.container { width: 150px; height: 150px; background-color: gray; }
Для того, щоб заокруглити кути використовують всластивість "border-radius". Давайте додамо це до нашої роботи:
border-radius: 15px;
В цьому випадку всі кути будуть заокруглені на 15px.
А як же бути, якщо потрібно заокруглити тільки один кут? Все просто, для цього потрібно перечислити значення для верхнього лівого, верхнього правого, нижнього правого, нижнього лівого кутів.
Приклад:
border-radius: 15px 15px 5px 5px;
Також радіус заокруглання можна задавати і у відсотках:
border-radius: 50%;
В цьому випадку у нас получиться круг.
Переглянути результат уроку можна тут: http://examples.web-programming.in.ua/border-radius_css3
Тільки авторизовані користувачі можуть додавати коментарі.