Свойство border-radius
Задает закругление углов элемента
border-radius: 10px;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
border-radius: 0;
Убирает скругление углов элемента
border-radius: 10px;
Скругление углов для всех сторон элемента, используя один параметр. Возможные единицы: px, em, rem, %, vw, vh
<style>
.example-1 {
width: 150px;
height: 150px;
background: #ff9031;
border-radius: 10px;
}
</style>
<div class="example-1"></div>border-radius: 90px 20px;
Скругление углов для всех сторон элемента, используя два параметра. Первый - верхний левый угол и правый нижний, Второй - верхний правый угол и левый нижний угол
<style>
.example-2 {
width: 150px;
height: 150px;
background: #d8d457;
border-radius: 90px 20px;
}
</style>
<div class="example-2"></div>border-radius: 20px 30px 145px;
Скругление углов для всех сторон элемента, используя три параметра. Первый - верхний левый угол, второй - верхний правый и нижний левый углы, третий - нижний правый угол
<style>
.example-3 {
width: 150px;
height: 150px;
background: #f12d63;
border-radius: 20px 30px 145px;
}
</style>
<div class="example-3"></div>border-radius: 15px 30px 45px 10px;
Скругление углов для всех сторон элемента, используя четыре параметра. Первый - верхний левый угол, второй - верхний правый угол, третий - нижний правый угол, четвертый - нижний левый угол
<style>
.example-4 {
width: 150px;
height: 150px;
background: #ff9031;
border-radius: 15px 30px 45px 10px;
}
</style>
<div class="example-4"></div>border-radius: 41% 60% 30% 59% / 40% 40% 53% 40%;
Скругление углов для всех сторон элемента, используя восемь параметров, разделенных на две группы. Первая группа отвечает за скругление верхних и нижних сторон каждого угла, вторая группа - левые и правые стороны каждого угла.
Первый параметр первой группы - верхняя граница левого верхнего угла, первый параметр второй группы - левая граница левого верхнего угла
Второй параметр первой группы - верхняя граница правого верхнего угла, второй параметр второй группы - правая граница правого верхнего угла
Третий параметр первой группы - нижняя граница правого нижнего угла, третий параметр второй группы - правая граница правого нижнего угла
Четвертый параметр первой группы - нижняя граница левого нижнего угла, четвертый параметр второй группы - левая граница левого нижнего угла
<style>
.example-5 {
width: 150px;
height: 150px;
background: #fa5144;
border-radius: 41% 60% 30% 59% / 40% 40% 53% 40%;
}
</style>
<div class="example-5"></div>