Css left top border radius: CSS border-top-left-radius property

Leave a Comment / Css / By /

Свойство border-top-left-radius | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-top-left-radius определяет форму границы верхнего левого угла.

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip.

  1. Скругление верхнего левого угла отсутствует. Значение по умолчанию 0 (ноль).
  2. Скругление верхнего левого угла (по типу дуги окружности). Значение указывается в единицах измерения CSS (px, em, cm и т.д.) и определяет radius (радиус) скругления. Допускается указывать значения в процентах. Отрицательные значения недопустимы.
  3. Скругление верхнего левого угла (по типу дуги эллипса). Значения указываются в единицах измерения CSS (px, em, cm и т.д.), первое значение определяет horisontal (горизонтальный) радиус скругления, а второе vertical (вертикальный).
    Допускается указывать значения в процентах. Отрицательные значения недопустимы.

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
border-top-left-radius5.0
4.0
-webkit-		4.0
3.0
-moz-		10.55.0
3.1
-webkit-		9.012.0

CSS синтаксис:

border-top-left-radius:"length | % | length или % length или % | initial | inherit";

JavaScript синтаксис:

object.style.borderTopLeftRadius = "5px"

Значения свойства

ЗначениеОписание
lengthОпределяет форму верхнего левого угла. Значение по умолчанию 0 (ноль). Отрицательные значения недопустимы.
%Определяет форму верхнего левого угла в процентах. Отрицательные значения недопустимы.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Установка формы границы верхнего левого угла элемента в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid red; /* устанавливаем сплошную границу размером 3px красного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
text-align : right; /* выравниваем текст по правому краю */
}

 
. test   {border-top-left-radius : 50px;}  /* скругление верхнего левого угла (по типу дуги окружности) */
.test2 {border-top-left-radius : 50px 25px;}  /* скругление верхнего левого угла (по типу дуги эллипса) */
.test3 {border-top-left-radius : 50px 100px;}  /* скругление верхнего левого угла (по типу дуги эллипса) */
.test4 {border-top-left-radius : 30% 30%;}  /* скругление верхнего левого угла (по типу дуги окружности) */
.test5 {border-top-left-radius : 90% 100px;;}  /* скругление верхнего левого угла (по типу дуги эллипса) */
</style>
</head>
	<body>
		<div class = "test">50px</div>
		<div class = "test2">50px 25px</div>
		<div class = "test3">50px 100px</div><br>
		<div class = "test4">30% 30%</div>
		<div class = "test5">90% 100px</div>
	</body>
</html>
Установка формы границы верхнего левого угла элемента в CSS (свойство border-top-left-radius).CSS свойства

css властивість border-top-left-radius

  • Головна
  • css
  • властивості
  • border-top-left-radius

Властивість border-top-left-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.

За допомогою border-radius можна встановити округлення для всіх кутів відразу.

Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.

Фон елементу, котрий може бути зображенням або кольором обрізається межею, й також округлюється. Точна позиція округлення визначається значенням заданим властивості

background-clip.

Нотатка:

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

Нотатка:

Необов’язкове друге значення призначене для створення еліптичного куточка, перше значення при цьому встановлює радіус по горизонталі, а друге — радіус по вертикалі. Якщо друге значення опущено воно копіюється з першого. Якщо будь-яке значення дорівнює нулю, то кут буде квадратним, а не округленим.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

border-top-left-radius: length|% [length|%]|initial|inherit;

Властивість border-top-left-radius може отримувати 4 значення:

length

Визначає форму кута. Значення без задання дорівнює 0

%

Визначає форму кута у %

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:0
Наслідує:Ні
Анімується:Так
JavaScript синтаксис:object. style.borderTopLeftRadius=»25px»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
базовий синтаксис

4.0

9.0

4.0

5.0

10.5

відсотки

4.0

9.0

4.0

5.0

10.5

еліптичні куточки

1. 0

9.0

3.5

3.0

10.5

Переглядач
базовий синтаксис

2.1

4.0

5.0

відсотки

2.1

4.0

5.0

еліптичні куточки

2.1

3. 5

3.0

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4
  • Приклад 5

Динамічний приклад

Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Додавання округого кутка для елемента
div { 


  border: 2px solid; 


  border-top-left-radius: 2em; 


}
Додаткові посилання
border-style
border-radius
border
border-bottom-left-radius
border-top-right-radius
border-bottom-right-radius
border-top
border-bottom
border-spacing
border-right-width
border-left-width
border-right
border-left
border-right-style
border-left-style
border-top-style
border-bottom-style
border-right-color
border-left-color
border-top-color
border-bottom-color
border-color
border-top-width
border-bottom-width
border-collapse
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-width
 css — Исключить границу при использовании радиуса границы 
 Задавать вопрос
 спросил 
  2 года 3 месяца назад 
 Изменено
 2 года, 3 месяца назад
 Просмотрено
 829 раз
 У меня есть  div , содержащий 2  раздел  с:
 <дел>
    <дел>
        . ..
<дел> ...

Я хочу добиться следующего поведения:

  • родительский div -> закругленные углы
  • дочерний первый div -> закругленные углы вверху
  • дочерний второй div -> закругленные углы внизу
  • между родительским div и дочерними -> границы от дочерних

Ожидается :

Actual :

Пытаясь получить ожидаемое изображение выше, я использовал следующий код для синего div:

 border-bottom: 10px сплошной зеленый;
граница слева: сплошной зеленый цвет 10 пикселей;
граница справа: 10 пикселей, сплошной зеленый цвет;
радиус нижнего левого края: 5px;
граница-нижний-правый-радиус: 5px;

и для красного div:

 верхняя граница: 10px сплошной зеленый;
граница слева: сплошной зеленый цвет 10 пикселей;
граница справа: 10 пикселей, сплошной зеленый цвет;
граница-верхний-левый-радиус: 5px;
радиус верхнего правого края: 5px;

Проблема в том, что радиус границы применяется к элементу, включающему границу . Итак, поскольку желаемый радиус границы (5 пикселей) меньше, чем граница (10 пикселей) для красного и синего элементов div, углы чтения и синего не округляются.

Я хочу применить border-radius к элементу , исключая границу .

Как я могу это сделать?

  • css
  • граница
  • закругленные углы

4

Думаю, для этого вам придется использовать разные селекторы.

Сначала вам нужно добавить border-radius к вашему родительскому div . Я предлагаю вам добавить класс или идентификатор к родительскому элементу, чтобы на ваши дочерние элементы div не влиял радиус границы :

 

    <дел>
    <дел>


 
 .родитель {
    радиус границы: 5px;
}

Для дочерних элементов вы можете продолжать использовать идентификаторы для выбора дочерних элементов. Но вы также можете использовать псевдоклассы first-child и last-child для их стилизации.

 .parent div:first-child {
  радиус верхнего правого края: 5px;
  граница-верхний-левый-радиус: 5px;
}
.parent div:последний ребенок {
  граница-нижний-правый-радиус: 5px;
  радиус нижнего левого края: 5px;
}

2

Вам необходимо применить подходящее заполнение к содержащему div для достижения целевого дизайна:

 #обертка
{
  набивка: 2рем;
  радиус границы: 1rem;
  цвет: зеленый;
  ширина: 8рем;
  запас: 1рем авто;
  дисплей: гибкий;
  flex-направление: столбец;
  цвет фона: зеленый;
}
#первый
{
  цвет фона: красный;
  высота: 4рем;
  радиус границы: 1rem 1rem 0 0;
}
#второй
{
  цвет фона: синий;
  высота: 4рем;
  радиус границы: 0 0 1 бэр 1 бэр;
} 
 <дел>
    <дел>