Border bottom radius: border-bottom-left-radius — CSS&colon; Cascading Style Sheets — Вебджем.рф

Содержание

bottom-left-radius | HTML и CSS с примерами кода

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

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

Фон

border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius

border-top-style
border-top-width
border-width
box-shadow

Синтаксис

/* the corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;
/* Percentage values */
border-bottom-left-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-left-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */
/* the corner is an ellipsis */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0. 5em 1em;
border-bottom-left-radius: inherit;

Значения

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

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

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

border-bottom-left-radius: 0;

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

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

CSS Backgrounds and Borders Module Level 3

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-bottom-left-radius</title>
    <style>
      . radius {
        background: #fc0;
        padding: 15px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div
     
     
    >
      border-bottom-left-radius: 20px
    </div>
    <div
     
     
    >
      border-bottom-left-radius: 70px 40px
    </div>
  </body>
</html>

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

CSS свойства

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

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

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
border-bottom-left-radius	5.0 4.0 -webkit-	4.0 3.0 -moz-	10.5	5.0 3.1 -webkit-	9.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

object.  style.borderBottomLeftRadius = "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; /* устанавливаем величину отступа от нижнего края элемента */
}
 . test   {border-bottom-left-radius : 50px;}  /* скругление нижнего левого угла (по типу дуги окружности) */
.test2 {border-bottom-left-radius : 50px 25px;}  /* скругление нижнего левого угла (по типу дуги эллипса) */
.test3 {border-bottom-left-radius : 50px 100px;}  /* скругление нижнего левого угла (по типу дуги эллипса) */
.test4 {border-bottom-left-radius : 30% 30%;}  /* скругление нижнего левого угла (по типу дуги окружности) */
.test5 {border-bottom-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-bottom-left-radius).

CSS свойства

html — Изогнутый конец нижней границы в CSS

спросил 6 лет, 11 месяцев назад

Изменено 6 лет, 11 месяцев назад

Просмотрено 19 тысяч раз

Я пытаюсь сделать так, чтобы нижняя часть рамки выглядела так:

С одним изогнутым концом. На данный момент это выглядит так:

CSS, который я пытаюсь использовать, это border-bottom-right-radius: 10px; . Код выглядит так:

 
    лорем ипсум

.заглавие {
    нижняя граница: 10px сплошная $mainRed;
    граница-нижний-правый-радиус: 10px;
}

Я также пробовал border-radius: 10px; , который дает мне тот же результат, за исключением того, что оба конца изогнуты. Увеличение этого числа просто увеличивает наклон линии вверх. Как сделать, чтобы линия выглядела правильно?

HTML
CSS

Это невозможно в границах по умолчанию, так как border-radius управляет радиусом вокруг элемента, а не одной кромкой границы.

Я бы рекомендовал сымитировать псевдоэлементом:

 div {
  максимальная ширина: 50vw;
  заполнение снизу: 25px;
  должность: родственница;
}
раздел: после {
  содержание:'';
  положение: абсолютное;
  дно:0;
  слева:0;
  справа: 0;
  фон:красный;
  высота: 20 пикселей;
  радиус границы: 0 10 пикселей 10 пикселей 0;
}

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quippe: habes enim a rhetoribus; Quodsi ipsam honoratem undique pertectam atque absolutam. Duo Reges: конструкция интеррете. Срочно tamen et nihil remittunt.

Не знаю, лучшее ли это решение, но вот оно:

Border bottom radius: border-bottom-left-radius — CSS: Cascading Style Sheets

bottom-left-radius | HTML и CSS с примерами кода

Синтаксис

Значения

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

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

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

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

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

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

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

Версия CSS

Наследуется

Анимируемое

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

html — Изогнутый конец нижней границы в CSS