CSS Закруглені кути
CSS Закруглені кути
За допомогою CSS властивості border-radius ви можете надати будь-якому елементу на вебсторінці "закруглені кути".
CSS властивість border-radius
CSS властивість border-radius визначає радіус кутів елемента.
Порада: Ця властивість дозволяє додавати закруглені кути до елементів!
Тут три приклади:
1. Закруглені кути для елемента із заданим кольором фону:
Закруглені кути!
2. Закруглені кути для елемента з межею:
Закруглені кути!
3. Закруглені кути для елемента з фоновым зображенням:
Закруглені кути!
Ось код:
Приклад
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Спробуйте самі »
Порада: Властивість border-radius насправді є скороченою властивістю для властивостей border-top-left-radius, border-top-right-radius, border-bottom-right-radius та border-bottom-left-radius.
CSS border-radius - Вкажіть кожен кут
Властивість border-radius може мати від одного до чотирьох значень. Ось правила:
Чотири значення - border-radius: 15px 50px 30px 5px; (перше значення застосовується до верхнього лівого кута, друге значення застосовується до верхнього правого кута, третє значення застосовується до нижнього правого кута і четверте значення застосовується до нижнього лівого кута). Щоб легше було запам’ятати, рахуйте так, як наче кути рахуються за направленням руху годинникової стрілки, починаючи з верхнього лівого кута:
Три значення - border-radius: 15px 50px 30px; (перше значення застосовується до верхнього лівого кута, друге значення застосовується до верхнього правого і нижнього лівого кутів, а третє значення застосовується до нижнього правого кута):
Два значення - border-radius: 15px 50px; (перше значення застосовується до верхнього лівого і нижнього правого кутів, а друге значення застосовується до верхнього правого і нижнього лівого кутів):
Одне значення - border-radius: 15px; (значення застосовується до всіх чотирьох кутів, які округлені однаково:
Ось код:
Приклад
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Спробуйте самі »
Ви також можете створити еліптичні кути:
Приклад
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Спробуйте самі »
Перевірте себе за допомогою вправ!
CSS Властивості для створення закруглених кутів
| Властивості | Опис |
|---|---|
| border-radius | Скорочена властивість для встановлення всіх чотирьох властивостей border-*-*-radius |
| border-top-left-radius | Визначає форму межі верхнього лівого кута |
| border-top-right-radius | Визначає форму межі верхнього правого кута |
| border-bottom-right-radius | Визначає форму межі нижнього правого кута |
| border-bottom-left-radius | Визначає форму межі нижнього лівого кута |
