Привет всем и сегодня разберём свойство border-radius , которое позволяет сделать закруглённые уголки для любых блочных элементов на странице.

Закруглённые углы на CSS3.

Привет всем и сегодня разберём свойство border-radius, которое позволяет сделать закруглённые уголки для любых блочных элементов на странице.

Для начала создадим простенькую html разметку

<html>
<head>
  <title>border-radius</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block"></div>
</body>
</html>

Теперь зададим базовые стили для нашего блока.

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
}

Вот, что мы имеем сейчас

базовый блок

Давайте скруглим углы блока на 10px

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 10px;
}

скруглённый блок

Чтобы скруглить все углы, мы добавили свойство border-radius с единственным значением 10px, но мы можем задать для каждого угла своё скругление. Для этого просто перечислим 4 значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 10px 20px 30px 40px;
}

скруглённый блок с разными значениями

Как видно из скриншота, все углы у нас теперь с разным скруглением. Мы можем также рассписать свойства для каждого угла отдельно

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-top-left-radius: 10px; // верхний левый угол
  border-top-right-radius: 20px; // верхний правый угол
  border-bottom-right-radius: 30px; // нижний правый угол
  border-bottom-left-radius: 40px; // нижний левый угол
}

"Зачем это нужно, если у нас есть сокращённая форма?" - Чтобы ответить на этот вопрос, давайте рассмотрим пример

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-bottom-right-radius: 20px 40px;
}

неравномерное скругление

Как видно из скриншота, наш правый нижний угол закруглён неравномерно. Т.е. по вертикали угол закруглился на 40px, а по горизонтали на 20px. Данный способ используется, когда вам нужно сделать какую-нибудь очень сложную фигуру на CSS, в остальных случаях вполне хватает сокращённой формы.

И последнее: вы можете указывать радиус закругления не только в пикселях, но и в процентах. Например, давайте сделаем идеальный круг. Для этого зададим всем углам радиус скругления 50%

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 50%;
}

идеальный круг