border-radius

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .button {  border: 2px solid transparent;  border-radius: 6px;}
          .button {
  border: 2px solid transparent;
  border-radius: 6px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Свойство 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: 2em / 50%;}
          .ellipse {
  border-radius: 2em / 50%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

• border-top-left-radius — радиус закругления для левого верхнего угла.
• border-top-right-radius — радиус закругления для правого верхнего угла.
• border-bottom-right-radius — радиус закругления для правого нижнего угла.
• border-bottom-left-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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать