Рамки со скругленными углами CSS

Свойство border-radius – Может задать скругление углов линии рамки.

Свойство border-radius – это сокращенное свойство для установки border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius в одном объявлении.

Две <length-percentage> значение border-*-radius свойство определяют радиусы четверти эллипса , который определяет форму угла внешнего края (смотрите схему ниже).

Два значения border-top-left-radius

В этом примере рисуются овалы шириной 7.5em и высотой 5em

Первое значение – это горизонтальный радиус, второе – вертикальный радиус.

.standout {
    width: 15em;
    height: 10em;
    border: solid blue 1em;
    border-radius: 7.5em 5em; }

Овалы шириной 7.5em и высотой 5em

Если второе значение не указано, оно копируется из первого.

Если любая длина равна нулю, угол квадратный, а не закругленный.

Проценты для горизонтального радиуса относятся к ширине рамки, тогда как проценты для вертикального радиуса относятся к высоте рамки. Отрицательные значения недопустимы.

border-radius сокращенные устанавливает все четыре border-*-radius свойство.

Пример:

.radius {
    width: 15em;
    height: 0.5em;
    border: solid blue 1em;
    border-radius: 4em;

Эквивалентно

.radius {
    width: 15em;
    height: 0.5em;
    border: solid blue 1em;
    border-top-left-radius:     4em;
    border-top-right-radius:    4em;
    border-bottom-right-radius: 4em;
    border-bottom-left-radius:  4em;
}

border-radius устанавливает все четыре угла

Если значения указаны до и после косой черты, то значения перед косой чертой задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус.

Если косой черты нет, то значения устанавливают оба радиуса одинаково.

Четыре значения для каждого радиуса даны в следующем порядке: верхний левый, верхний правый, нижний правый, нижний левый. Если нижний левый опущен, это то же самое, что и верхний правый.

Если нижний правый опущен, он совпадает с верхним левым.

Если верхний правый опущен, это то же самое, что и верхний левый.

Пример:

.radius {
    width: 15em;
    height: 0.5em;
    border: solid blue 1em;
    border-radius:: 2em 1em 4em / 0.5em 3em;

Эквивалентно

.radius {
    width: 15em;
    height: 0.5em;
    border: solid blue 1em;
    border-top-left-radius:     2em 0.5em;
    border-top-right-radius:    1em 3em;
    border-bottom-right-radius: 4em 0.5em;
    border-bottom-left-radius:  1em 3em;
}

Пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Сокращенные свойства рамки: border</title>
    <style type="text/css">
    @media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 { 
   color: blue; 
}
p  {
   font-size:14pt;
   width: 300px;
   padding: 10px;
}
.radius { border: 2px solid blue; 
    height: 100px; 
    padding: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px 30px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px 30px;
}
.radius1 { border: 2px solid green; 
    height: 100px; 
    padding: 10px;
    border-radius: 20px / 30px;
}
.radius2 { border: 2px solid red;
    height: 100px; 
    padding: 10px;
    border-radius: 20px;
}
.radius3 { border: 2px solid gray; 
    height: 100px; 
    padding: 10px;
    border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
}
.radius4 { border: 2px solid olive; 
    height: 100px; 
    padding: 10px;
    border-radius: 10px 20px 30px 40px;
}
</style>
  </head>
  <body>
   <h1>Рамки со скругленными углами</h1>
   <p class="radius"></p>
   <p class="radius1"></p>
   <p class="radius2"></p>
   <p class="radius3"></p>
   <p class="radius4"></p>
   </body>
</html>

Открыть пример в новом окне