border-radius

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство border-radius закругляет углы почти у любого элемента. И даже если у блока не задана явная рамка.

🔮 Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.

Пример

Секция статьи "Пример"

Самая простая штука — кнопка с закруглёнными краями:

        
          
          <button class="btn">Купить</button>
          <button class="btn">Купить</button>

        
        
          
        
      
        
          
          .btn {  border: none;  border-radius: 5px;}
          .btn {
  border: none;
  border-radius: 5px;
}

        
        
          
        
      
Открыть демо в новой вкладке

Обрати внимание, что мы сбросили стандартную рамку кнопки, но углы тем не менее слегка закруглились.

Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет «нажиматься» — получится привлекательно и современно 😉

        
          
          body {  background-color: #e6e6e6;}.btn:focus {  box-shadow: inset 0 0 0 3px #e6e6e6;  transition: all 0.2s;}
          body {
  background-color: #e6e6e6;
}

.btn:focus {
  box-shadow: inset 0 0 0 3px #e6e6e6;
  transition: all 0.2s;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

Свойство border-radius задаёт радиус закругления каждого из углов элемента.

Если значение задано в процентах, то оно будет высчитываться от размеров элемента: горизонтальные размеры будут высчитываться от ширины элемента, а вертикальные — соответственно, от высоты (поэтому для квадратного элемента можно задать border-radius: 50%, чтобы сделать его круглым).

Как пишется

Секция статьи "Как пишется"

Пройдёмся по синтаксису:

        
          
          div {  /* радиус в пикселях */  border-radius: 5px;  /* радиус в процентах */  border-radius: 50%;  /* разные радиусы для каждого из четырёх углов элемента */  border-radius: 5px 0 0 50%;}
          div {
  /* радиус в пикселях */
  border-radius: 5px;
  /* радиус в процентах */
  border-radius: 50%;
  /* разные радиусы для каждого из четырёх углов элемента */
  border-radius: 5px 0 0 50%;
}

        
        
          
        
      

Можно управлять степенью закругления каждого из углов в отдельности или задать одно значение для всех углов сразу. Причём значение на самом деле состоит из двух — скругления по горизонтальной оси и по вертикальной. Чтобы явно задать скругление для каждой из осей (т. е. получить не круглое значение, а эллипсоидное), это значение следует записывать через символ /:

        
          
          .ellipse {  border-radius: 5em / 50%;}
          .ellipse {
  border-radius: 5em / 50%;
}

        
        
          
        
      

Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:

        
          
          .ellipse {  border-top-left-radius: 5em 50%;  border-top-right-radius: 5em 50%;  border-bottom-right-radius: 5em 50%;  border-bottom-left-radius: 5em 50%;}
          .ellipse {
  border-top-left-radius: 5em 50%;
  border-top-right-radius: 5em 50%;
  border-bottom-right-radius: 5em 50%;
  border-bottom-left-radius: 5em 50%;
}

        
        
          
        
      
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Значение по умолчанию: 0.

💡 border-radius сработает даже если не будет задана видимая рамка.

💡 Чтобы увидеть результат работы свойства, надо задать фоновую заливку или картинку блоку, к которому применяется закругление углов. Или рамку, или фон для родительского элемента. Что-то, что отделит белое от белого 🤗

💡 Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:

  • border-top-left-radius — радиус закругления для левого верхнего угла.
  • border-top-right-radius — радиус закругления для правого верхнего угла.
  • border-bottom-right-radius — радиус закругления для правого нижнего угла.
  • border-bottom-left-radius — радиус закругления для левого нижнего угла.

На практике

Секция статьи "На практике"

Realetive

Секция статьи "Realetive"

🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, border-radius: 9999px. Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:

Открыть демо в новой вкладке

Алёна Батицкая

Секция статьи "Алёна Батицкая"

🛠 Самый крутой лайфхак — это круглые элементы при помощи border-radius. Они часто нужны для всяких лейблов на странице.

        
          
          <button class="icon" data-notifications="3"></button>
          <button class="icon" data-notifications="3"></button>

        
        
          
        
      
        
          
          .icon {  background-image: url(eyes.png);}.icon::after {  content: attr(data-notifications);  /* равные ширина */  width: 25px;  /* и высота */  height: 25px;  /* закругляем углы на 50% */  border-radius: 50%;  color: #ffffff;  background-color: #ed4242;}
          .icon {
  background-image: url(eyes.png);
}

.icon::after {
  content: attr(data-notifications);
  /* равные ширина */
  width: 25px;
  /* и высота */
  height: 25px;
  /* закругляем углы на 50% */
  border-radius: 50%;
  color: #ffffff;
  background-color: #ed4242;
}

        
        
          
        
      
Открыть демо в новой вкладке