Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии