Свойство CSS border-top-left-radius
border-top-left-radius — CSS-свойство, задающее форму верхнего левого угла элемента. Смотрите примеры использования.
CSS-свойство border-top-left-radius скругляет верхний левый угол рамочного блока элемента. Это одно из четырёх подробных свойств — наряду с border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius — которые входят в состав сокращённого свойства border-radius. Используйте это подробное свойство, когда нужно скруглить только один угол.
Свойство border-top-left-radius относится к свойствам CSS3.
Угол можно скруглить в виде окружности или эллипса, а при отсутствии значения он остаётся прямым. Если задано фоновое изображение или цвет, они обрезаются по форме рамки. Поведение обрезки управляется свойством background-clip.
Как работают значения
Свойство border-top-left-radius принимает одно или два значения, каждое из которых задаётся как <length> или <percentage>:
- Одно значение устанавливает горизонтальный и вертикальный радиусы угла одновременно, создавая круговое (четверть окружности) скругление.
- Два значения задают радиусы эллипса: первое — горизонтальный радиус, второе — вертикальный.
Проценты для горизонтального радиуса вычисляются относительно ширины элемента, а для вертикального — относительно его высоты. Отрицательные значения недопустимы, и такое объявление игнорируется.
Важно: если сумма радиусов на одной стороне превышает длину этой стороны, браузер пропорционально уменьшает все радиусы углов, чтобы кривые не перекрывались. Поэтому большое значение вроде
border-top-left-radius: 9999px— безопасный способ сделать угол настолько круглым, насколько позволяет блок.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследование | Нет |
| Анимируемость | Да. Радиус рамки поддерживает анимацию. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.borderTopLeftRadius = "25px"; |
Синтаксис
Синтаксис свойства CSS border-top-left-radius
border-top-left-radius: length | % | initial | inherit;Ниже приведён пример border-top-left-radius с одним значением. Когда указывается только одно значение, оно задаёт одновременно горизонтальный и вертикальный радиусы эллипса.
Пример свойства border-top-left-radius:
Пример CSS border-top-left-radius с одним значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-top-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Результат
В следующем примере первое значение задаёт горизонтальный радиус, а второе — вертикальный.
Пример свойства border-top-left-radius с двумя значениями:
Пример CSS border-top-left-radius с двумя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #ccc;
border: 4px solid #000000;
border-top-left-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>В следующем примере используются процентные значения. Первое значение задаёт горизонтальный радиус, второе — вертикальный.
Пример свойства border-top-left-radius со значением "%":
Пример CSS border-top-left-radius с процентным значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #eee;
border: 4px solid #000000;
border-top-left-radius: 50% 60%;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| length | Задаёт скругление верхнего левого угла. | Попробуйте » |
| % | Задаёт скругление верхнего левого угла в процентах. | Попробуйте » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробуйте » |
| inherit | Наследует свойство от родительского элемента. |
Когда использовать подробное свойство
Используйте border-top-left-radius, когда нужно скруглить только один угол — например, для вкладки, речевого пузыря или карточки, верхний край которой вплотную прилегает к заголовку. Чтобы скруглить все углы сразу, удобнее использовать сокращённое свойство border-radius:
/* These two rules are equivalent for a single corner */
border-top-left-radius: 25px;
border-radius: 25px 0 0 0;Связанные свойства
- border-radius — сокращённое свойство для всех четырёх углов.
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border — задаёт ширину, стиль и цвет рамки.
Поддержка браузерами
border-top-left-radius поддерживается во всех современных браузерах (Chrome, Firefox, Safari, Edge) без вендорных префиксов.