border-bottom-right-radius в CSS


border-bottom-right-radius

Свойство CSS border-bottom-right-radius используется для скругления нижнего правого угла фона элемента. Если имеется рамка элемента, то она тоже скругляется. Важно понимать, что форма самого элемента в любом случае остается прямоугольной.

Для скругления сразу всех углов элемента можно использовать свойство border-radius.

Тип свойства

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

Значения

Значением свойства border-bottom-right-radius является одна или две (разделенных пробелом) величины указывающие радиус скругления. Две величины используются для создания овальных (эллиптических) скруглений, где первая отвечает за радиус по горизонтали (ось X), а вторая — по вертикали (ось Y). Допустимые значения:

  • Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента с учетом внутренних отступов (padding) и рамки (border). Отрицательные значения (-20%) указывать нельзя.
  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.

Процентная запись: относительно ширины или высоты элемента (в зависимости от места использования) с учетом размеров рамки и внутренних отступов.

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

Пример скругления нижнего правого угла с разными вариантами значений.

Обратите внимание, что координаты отсчитываются от внешнего края рамки.

Синтаксис

Пример CSS: использование border-bottom-right-radius

Результат. Использование свойства CSS border-bottom-right-radius в браузере Opera.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Нет Нет Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше До 4.0 От 4.0 до 7.0 7.0 и выше До 4.0 4.0 и выше До 10.5 10.5 и выше До 5.0 5.0 и выше
Поддержка: Нет Да Нет Частично Да Нет Да Нет Да Нет Частично

Google Chrome до версии 7.0 и Safari с версии 5.0 не понимают процентные значения border-bottom-right-radius .

CSS border-bottom-right-radius Свойство

Пример

Добавьте скругленные границы в правый нижний угол двух элементов

#example1 <
border: 2px solid red;
border-bottom-right-radius: 25px;
>

#example2 <
border: 2px solid red;
border-bottom-right-radius: 50px 20px;
>

Подробнее примеры ниже.

Определение и использование

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

Совет: Это свойство позволяет добавлять округленные границы к элементам!

Значение по умолчанию:
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.borderBottomRightRadius=»25px»

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Свойство
border-bottom-right-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

Синтаксис CSS

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

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

Значение Описание
length Определяет форму нижнего правого угла. Значение по умолчанию — 0. Читать о единицах длины
% Определяет форму нижнего правого угла в %
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Добавьте округленные границы в правый нижний угол в процентах:

Свойство border-bottom-right-radius

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

Допустимые значения

  • — точное значение радиуса (не может быть отрицательным)
  • — значение радиуса в процентах.

Есть возможность задать эллиптические радиусы используя пробел. Значение до пробела — радиус по оси х, а после пробела — радиус по оси у.

эллиптический радиус

Если значения указаны в процентах, то значение радиуса по оси х отсчитывается в процентах от ширины блока, а значение радиуса по оси у — от высоты блока.

Значение по умолчанию
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 5 и выше

Пример

Твой код:
Результат:

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3-5 и Chrome 1-5 поддерживают аналогичное свойство -webkit-border-bottom-right-radius, а Firefox 1.0-4.0 -moz-border-radius-bottomright, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-bottom-right-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius-bottomright рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше.

CSS свойство border-bottom-right-radius

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

Илон Маск рекомендует:  Синтаксис HTML

CSS синтаксис

Внимание: Использование двух значений (числовых или процентных) позволяет определить эллиптическую форму уголка рамки. При этом первое значение определяет горизонтальный радиус, а второе — вертикальный. Если используются процентные значения, то первое значение — это процент от ширины блока, а второе — процент от его высоты.

Возможные значения

Значение Описание
значение Устанавливает радиус скругления в допустимых в CSS значениях (px, cm, in, em и др.). Значение по умолчанию 0.
% Устанавливает радиус скругления в процентах от ширины блока.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример №1

Добавляем круглую рамку в правом нижнем углу элемента

Пример №2

Добавляем эллиптическую рамку в правом нижнем углу элемента

CSS3 border-bottom-right-radius Property

Description

The border-bottom-right-radius CSS property sets the rounded shape for the ‘bottom-right’ corner of an element border box.

The following table summarizes the usages context and the version history of this property.

Default value:
Applies to: All elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Note: The border-bottom-right-radius property causes the element’s background to be rounded even if no borders have been defined or its value is set to none .

Syntax

The syntax of the property is given with:

[ length | percentage ] 1 or 2 values | initial | inherit

This shorthand notation can take one, or two whitespace separated values.

  • The optional second length values define the vertical radii for the top-right corner and the corner shape is thus a quarter ellipse.
  • If the second length is omitted, or it is equal to the first — the corner shape is a quarter circle. If either length is zero, the corner is square, not rounded.

The example below shows the border-bottom-right-radius property in action.

Example

  • div <
  • border : 2px solid #f08080 ;
  • border-bottom-right-radius : 20px ;
  • >

Property Values

The following table describes the values of this property.

Value Description
length A length value in px , pt , cm , em , etc. Negative values are not allowed.
percentage The size of the radius in percentage. In case of two values, percentage for the first value (i.e. horizontal radius) is calculated with respect to the width of the element’s box, while percentage for the second value (i.e. vertical radius) is calculated with respect to the height of the element’s box. Negative values are not allowed.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element border-bottom-right-radius property.

Browser Compatibility

The border-bottom-right-radius property is supported in all major modern browsers.

Basic Support—

  • Firefox 4+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 5+
  • Opera 10.5+

Warning: Internet Explorer 8 and earlier versions do not support the border-bottom-right-radius property. Supported in IE9 and above.

CSS: border-bottom-right-radius property

This CSS tutorial explains how to use the CSS property called border-bottom-right-radius with syntax and examples.

Description

The CSS border-bottom-right-radius property defines rounded corners on the right side of the bottom border of a box.

Syntax

The syntax for the border-bottom-right-radius CSS property is:

Parameters or Arguments

The radius value to apply to the right side of the bottom border of a box. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, .
div
percentage Percentage value
div
inherit Element will inherit the border-bottom-right-radius from its parent element
div
  • See also the border-bottom-left-radius and border-radius properties.

Browser Compatibility

The CSS border-bottom-right-radius property has basic support with the following browsers:


  • Chrome 4
  • Firefox 4+ (Gecko 2+)
  • Internet Explorer 9+ (IE 9+)
  • Opera 10.5+
  • Safari 5+ (WebKit 3+)

Example

We will discuss the border-bottom-right-radius property below, exploring examples of how to use this property in CSS.

Let’s look at a CSS border-bottom-right-radius example where we provide a pixel value.

In this CSS border-bottom-right-radius example, we have defined rounded corners of 3px on the right side of the bottom border for the

Next, we’ll look at a CSS border-bottom-right-radius example where we provide an em value.

In this CSS border-bottom-right-radius example, we have defined rounded corners of 1em to the right side of the bottom border.

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

Или более подробно:

Outline

Самый популярный способ создания двойной границы — это параметр outline:

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

Псевдоэлементы

Можно использовать такую конструкцию:

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

К параметру border-radius можно применять два значения, используя «/», например:

Это то же самое, что:

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

Или то же самое:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

CSS :: Свойство border-bottom-right-radius

css -свойство border-bottom-right-radius (от англ. border bottom right radius – нижний правый радиус границы) используется для скругления нижнего правого угла элемента. При этом border-bottom-right-radius срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента.

Характеристики

  • Значение по умолчанию: 0 .
  • Применяется: ко всем элементам , за исключением таблиц с border-collapse: collapse .
  • Наследуется: нет .
  • Анимируется: да .
  • JavaScript: object.style.borderBottomRightRadius=»value» .

Синтаксис

Значения

Любые доступные в CSS единицы измерения (смотреть), а также проценты, отсчет которых производится относительно ширины блока.

Если подразумевается сгругление границ по эллипсу, свойству следует передавать через пробел сразу два радиуса.

Border-bottom-right-radius в CSS

Замечательное свойство CSS3 border-raduis позволяет легко создавать закруглённые углы без использования изображений или лишних div тэгов. Это одно из полезнейших и обсуждаемых CSS3 свойств.

С первого анонса в 2005 году, свойство border radius стали поддерживать практически все современные браузеры (хоть и с некоторыми особенностями, о которых будет сказано ниже). А из-за простоты использования веб-разработчик может без труда применять данную технологию в своих проектах.

Приведу простой пример:

В теории, код для данного примера очень простой:

Однако, не всё так просто. Для совместимости с Firefox, нужно использовать префикс -moz- (об этом читай секцию поддержки браузеров, moz border radius):

Как это работает

Существует два способа. Закруглённые углы можно создавать индивидуально для каждого угла, используя свойство border-*-radius (border-bottom-left-radius, border-top-left-radius, и т.д.), либо используя более короткое свойство border-radius.

Давайте для начала рассмотрим как использовать свойство для создания индивидуальных углов border-*-radius, а после разберём короткий аналог border-radius.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

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

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

Синтаксис:

Пример:

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

Если указано всего одно значение, то оно определяет как горизонтальный так и вертикальный радиус.

На рисунке отображено несколько примеров разных значений и соответствующих им углов:

Если какое-либо значение будет равно нулю, то угол будет квадратный, а не круглый.

border-radius

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

Синтаксис:

Пример:

Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырёх углов. Опциональный второй набор значений, указаный после слеша, определяет вертикальные радиусы для всех четырёх углов. Если указан только один набор значений, то он используется одинаково для определения вертикальных и горизонтальных углов.

Если указаны все четыре значения, то они представляют собой верхний левый, верхний правый, нижний правый и нижний левый радиусы соответственно. Если опущен нижний левый, то он принимает значение правого верхнего угла. Если опущен нижний правый, то он принимает значение левого верхнего угла. А если указано всего одно значение, то оно используется для всех четырёх радиусов одновременно.

Поддержка браузеров

В настоящее время Opera (версия 10,5 и старше), Safari (версия 5 и старше) Chrome (версия 5 и старше) поддерживают как border-radius, так и индивидуальные свойства border-*-radius, описанные в текущей спецификации W3C (хотя ещё есть много мелких ошибок и несогласований, таких как например границы перехода, использование процентов в длине и т.д.).

Mozilla Firefox (версия 1.0 и старше) поддерживает свойство border-radius с префиксом -moz-, хоть и есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (об этом ниже).

Последние версии браузера Firefox понимают border-radius без префикса -moz-.

Safari и Chrome (а так-же другие браузеры, основанные на движке webkit) поддерживают border-radius с префиксом -webkit- начиная с 3 версии (с 5 версии префикс уже не нужен), но так-же с некоторыми отклонениями от текущей спецификации.

Internet Explorer 9 абсолютно так-же поддерживает свойство border radius.

Префикс -moz-

Начиная с 1-ой версии, браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz-. Однако, браузер только начиная с версии 3.5 стал использовать эллиптические углы, т.е. стал принимать два значения для угла, что-бы определить вертикальный и горизонтальный радиусы самостоятельно. До версии 3.5 браузер принимает только по одному значению для каждого угла, в результате чего одинаковы вертикальные и горизонтальные радиусы для угла одинаковы.

Синтаксис, как и написано в данной статье использует префикс -moz-. Основное различие только в названиях отдельных границ свойства border-*-radius, с префиксом -moz- всё выглядит немного по другому:

W3C Specification Mozilla Implementation
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

Метод с использованием процентов при реализации для браузера Mozilla немного отличается. Об этом можно подробней прочитать в Центре Разработчиков Mozilla здесь.

Кросс-браузерные примеры

Несколько базовых примеров, которые отлично работают в текущих версиях Firefox, Safari/Chrome, Opera и IE9:

border-radius

Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

  1. Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.
  • Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
  • Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
  • Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
  • Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:

  1. Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.

Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.

В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:

Общая информация и примечания

Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:

Но иногда цвет фона элемента может « просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

Если у элемента есть границы изображения, то они не подрезается кривой закругленных углов.

Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:

В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.

Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.

Также кривые углов не должны пересекаться: когда сумма радиусов любых двух соседних границ превышает размер блока, браузеры должны пропорционально уменьшить используемые значения всех радиусов границ, чтобы ни один из них не перекрывался.

Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:

Если высота и ширина элемента не равны, мы получим эллиптическую форму:

Официальный синтаксис

Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.

Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .

Значения

Неофициальный синтаксис webkit border radius CSS :

В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.

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

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

Свойство CSS3 Border-radius (закругленные углы)

Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS , а также полных свойств ( например, `border-top-left-radius` ).

Рекомендация W3C

Поддерживается со следующих версий:

Chrome Firefox IE Opera Safari
4 * 2 * 9 10 3.1 *
iOS Safari Android Opera Mobile Android Chrome Android Firefox
3.2 * 2.1 * 11 56 51

* требуется указание префикса

Данная публикация представляет собой перевод статьи « border-radius » , подготовленной дружной командой проекта Интернет-технологии.ру

Илон Маск рекомендует:  Сформировать залитый прямоугольник с закругленными краями
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL