Свойство CSS border-top-left-radius
Свойство CSS border-top-left-radius задаёт скругление левого верхнего угла элемента.
Свойство border-top-left-radius является одним из свойств CSS3.
Угол может быть скруглён до круга или эллипса, либо остаться квадратным, если значение не указано. Если вы используете фоновое изображение или цвет, оно будет обрезано по форме границы. Поведение обрезки контролируется свойством background-clip.
Свойство border-top-left-radius принимает одно или два значения, каждое из которых задаётся как <length> или <percentage>. Когда используется только одно значение, оно задаёт как горизонтальный, так и вертикальный радиусы эллипса. Когда используются два значения, первое задаёт горизонтальный радиус, а второе — вертикальный. Проценты для горизонтального радиуса относятся к ширине элемента, а проценты для вертикального радиуса — к его высоте. Отрицательные значения недопустимы.
| Начальное значение | 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' в CSS?