Перейти к содержанию

border-top-left-radius

Свойство border-top-left-radius устанавливает радиус скругления левого верхнего уголка рамки.

Если рамка не задана, то скругление также происходит и с фоном.

Демо

Фон

Синтаксис

1
2
3
4
5
6
7
8
9
/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* the corner is an ellipse */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Значение по-умолчанию:

1
border-top-left-radius: 0;

Применяется к: Ко всем элементам

Спецификации

Поддержка браузерами

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-top-left-radius</title>
    <style>
      .title {
        background: #000080; /* Цвет фона */
        color: #ffe; /* Цвет текста */
        padding: 7px; /* Поля вокруг текста */
        border-top-left-radius: 10px; /* Левый верхний уголок */
        border-top-right-radius: 10px; /* Правый верхний уголок */
      }
      .content {
        border: 1px solid #000080; /* Параметры рамки */
        background: #f0f0f0; /* Цвет фона */
        padding: 7px; /* Поля вокруг текста */
        border-bottom-left-radius: 10px; /* Левый нижний уголок */
        border-bottom-right-radius: 10px; /* Правый нижний уголок */
      }
    </style>
  </head>
  <body>
    <div class="title">Буквица</div>
    <div class="content">
      Буквица является художественным приемом оформления
      текста и представляет собой увеличенную первую букву,
      базовая линия которой ниже на одну или несколько строк
      базовой линии основного текста.
    </div>
  </body>
</html>

Комментарии