Border right css: border-right | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

border-right | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Свойство border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Синтаксис

border-right: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right</title>
  <style>
   .line {
    border-left: 1px solid red; /* Линия слева от текста */
    border-right: 1px solid red; /* Линия справа от текста */
    padding: 0 10px;  /* Расстояние между линией и текстом */
    margin: 0 10%; /* Отступы от края до линии */
   }
  </style>
 </head>
 <body> 
  <div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение border-right

Объектная модель

[window.]document.getElementById(«elementID»).style.borderRight

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

border-right-style | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Устанавливает стиль границы справа от элемента.

Синтаксис

Значения

none: Линия не отображается и значение ее толщины обнуляется.
hidden: Имеет тот же эффект, что и none за исключением применения border-right-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае правая граница в ячейке не будет отображаться вообще.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной линии.
ridge: Создает эффект рельефной линии.
inset: Псевдотрехмерная линия.
outset: Псевдотрехмерная линия.
inherit: Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right-style</title>
  <style>
   .line {
    border-right-color: #ef40b0; /* Цвет линии справа */
    border-right-style: dotted; /* Стиль линии */
    border-right-width: 3px; /* Толщина линии */
    border-left-color: #ef40b0; /* Цвет линии слева */
    border-left-style: dotted; /* Стиль линии */
    border-left-width: 3px; /* Толщина линии */
    padding: 0 10px; /* Расстояние между линией и текстом */
    margin: 0 50px; /* Отступы справа и слева */
   }
  </style>
 </head>
 <body>
   
  <div>   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci 
   tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
   consequat.
  </div>
  
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-right-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderRightStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

border-right-width | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Устанавливает толщину границы справа от элемента.

Синтаксис

border-right-width: значение | thin | medium | thick | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы справа. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right-width</title>
  <style>
   .line {
    border-right-color: #c38e63; /* Цвет линии справа */
    border-right-style: dashed; /* Стиль линии */
    border-right-width: 2px; /* Толщина линии */
    border-left-color: #c38e63; /* Цвет линии слева */
    border-left-style: dashed; /* Стиль линии */
    border-left-width: 2px; /* Толщина линии */
    padding: 0 10px; /* Расстояние между линией и текстом */
   }
  </style>
 </head>
 <body> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci 
   tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
   commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-right-width

Объектная модель

[window.]document.getElementById(«elementID»).style.borderRightWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

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

border-right-color | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Задает цвет границы справа от элемента.

Синтаксис

border-right-color: цвет | transparent | inherit

Значения

См. цвет

transparent: Устанавливает прозрачный цвет.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right-color</title>
  <style>
   .line {
    border-right-color: navy; /* Цвет линии справа */
    border-right-style: dotted; /* Стиль линии */
    border-right-width: 3px;  /* Толщина линии */
    padding-right: 10px;  /* Расстояние между линией и текстом */
    margin-right: 100px; /* Отступ справа */
   }
  </style>
 </head>
 <body> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-right-color

Объектная модель

[window.]document.getElementById(«elementID»).style.borderRightColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

-moz-border-right-colors | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
				1.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам

Версии CSS

Описание

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

Не применяется:

если значение border-style установлено как dashed или dotted;
к таблицам, у которых border-collapse задано как collapse.

Синтаксис

-moz-border-right-colors: [цвет]* цвет | none

Значения

none: Нет цвета или используется цвет, заданный свойством border-color.
цвет: Значение цвета в любом допустимом для CSS формате. Также можно использовать значение transparent для указания прозрачности.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-right-colors</title>
  <style>
   .gradient {
    border: 5px solid black;
    -moz-border-top-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-left-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-right-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-bottom-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    background: #ffe;
    padding: 10px;
   }
  </style>
 </head> 
 <body> 
  <div>
   Градиент это пошаговое изменение цвета от одной точки к другой.
  </div>
 </body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования -moz-border-right-colors

Браузеры

-moz-border-right-colors нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.

CSS свойство border-right-style

CSS свойство border-right-style используется для установления стиля правой границы элемента. Свойство border-right-style устанавливается как отдельное ключевое слово, выбранное из всех доступных вариантов для свойства border-style .

Свойство border-style используется для установления стиля всех сторон элемента, но border-right-style устанавливает стиль только для правой границы.

Толщина правой границы по умолчанию — medium. Она может быть изменена используя свойство border-right-width или border-width.

Браузеры отображают стили по разному. Например, Chrome отображает не круглые, а прямоугольные точки.

Данная спецификация не устанавливает каким должно быть расстояние между точками и пунктирами.

Данная спецификация не устанавливает как соединяются границы разных стилей в углах.

Синтаксис¶

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <style>
      h3 {
      border-right-style: solid;
      }
      p {
      border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h3>Пример с solid border-right-style.</h3>
    <p>Параграф с dotted border-right-style.</p>
  </body>
</html>

Попробуйте сами!

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

В зависимости от значения border-color, эффекты значений groove, ridge, inset и outset могут быть изменены.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #c9c5c5;
      font-size: 20px;
      text-align: center;
      }
      main div {
      display: flex;
      align-items: center;      
      justify-content: center;
      color: black;
      padding-top: 30px;
      padding-bottom: 30px;
      width: 200px;
      height: 100px;
      margin: 15px;
      font-weight: bold;
      background-color: #1c87c9;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      
      .b1 { border-right-style: hidden; }
      .b2 {border-right-style: dotted;}
      .b3 {border-right-style: dashed;}
      .b4 {border-right-style: solid;}
      .b5 {border-right-style: double;}
      .b6 {border-right-style: groove;}
      .b7 {border-right-style: ridge;}
      .b8 {border-right-style: inset;}
      .b9 {border-right-style: outset;}
    </style>
  </head>
  <body>
    <h3>Примеры значения border-right-style</h3>
    <main>
      <div>
        hidden
      </div>
      <div >
        dotted
      </div>
      <div >
        dashed
      </div>
    </main>
    <main>
      <div >
        solid
      </div>
      <div>
        double
      </div>
      <div>
        groove
      </div>
    </main>
    <main>
      <div>
        ridge
      </div>
      <div>
        inset
      </div>
      <div>
        outset
      </div>
    </main>
  </body>
</html>

Попробуйте сами!

Значения¶

CSS — border-right-width — The border-right-widthCSS property sets the width of the right border of an elem

The border-right-widthCSS property sets the width of the right border of an element.

Syntax

border-right-width: thin;
border-right-width: medium;
border-right-width: thick;


border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;


border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;

Values

<line-width>

Определяет ширину границы как явное неотрицательное <length> или как ключевое слово. Если это ключевое слово, оно должно иметь одно из следующих значений:

`thin`		Тонкая рамка
`medium`		Средняя граница
`thick`		Толстая кайма

Примечание. Поскольку спецификация не определяет точную толщину, обозначаемую каждым ключевым словом, точный результат при использовании одного из них зависит от реализации. Тем не менее, они всегда следуют шаблону thin ≤ medium ≤ thick , и значения постоянны в пределах одного документа.

Formal definition

Формальный синтаксис

<line-width>where 
<line-width> = <length> | thin | medium | thick

Examples

Comparing border widths

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div { 
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}

Result

Specifications

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`border-right-width`	1	12	1	4	3.5	1

	Mobile
	Android веб-просмотр	Хром для Android	Firefox для Android	Опера для Android	Safari on iOS	Samsung Интернет
`border-right-width`	2.3	18	4	10.1	1	1.0

См.также

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

Пример

Установить стиль правой границы для разных элементов:

h2 {
border-right: 5 пикселей сплошной красный;
}

h3 {
border-right: синий пунктир 4px;
}

дел {
граница-правая: двойная;
}

Попробуй сам »

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

Свойство border-right сокращенно недвижимость по адресу (в следующем порядке):

Если параметр border-right-color опущен, применяемый цвет будет цветом текст.

Значение по умолчанию:	средний нет цвет
Унаследовано:	нет
Анимируемое:	да, посмотреть отдельные свойства . Прочитать про animatable Попытайся
Версия:	CSS1
Синтаксис JavaScript:	объект .style.borderRight = «синий пунктир, 5 пикселей» Попытайся

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

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

Имущество
граница правая	1,0	4,0	1,0	1.0	3,5

Синтаксис CSS

граница справа: ширина границы стиль границы цвет границы | начальный | наследование;

Стоимость объекта

Значение	Описание
ширина рамки справа	Обязательно. Задает ширину правой границы. Значение по умолчанию «средний»
граница правая	Обязательно.Задает стиль правой границы. Значение по умолчанию «нет»
цвет рамки справа	Необязательно. Задает цвет правой границы. Значение по умолчанию — цвет текста
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные
унаследовать	Наследует это свойство от своего родительского элемента.Читать про наследство

Связанные страницы

Учебник

CSS: Граница CSS

Ссылка на HTML DOM: свойство borderRight

CSS свойство border-right-style

Пример

Задайте стиль для правой границы:

div {border-right-style: dotted;}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

Свойство border-right-style устанавливает стиль правой границы элемента.

Значение по умолчанию:	нет
Унаследовано:	нет
Анимируемое:	нет. Прочитать про animatable
Версия:	CSS1
Синтаксис JavaScript:	объект .style.borderRightStyle = «dotted» Попытайся

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

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

Имущество
рамка-правая	1,0	4,0	1,0	1,0	3,5

Синтаксис CSS

Стоимость объекта

Значение	Описание	Играй
нет	Указывает без рамки.Это значение по умолчанию	Играй »
скрыто	То же, что «нет», за исключением пограничного конфликта разрешение элементов стола	Играй »
с точками	Определяет пунктирную границу.	Играй »
штриховая	Определяет пунктирную границу.	Играй »
цельный	Задает сплошную границу	Играй »
двойной	Задает двойную границу	Играй »
паз	Задает трехмерную рифленую границу.Эффект зависит от значение цвета границы	Играй »
гребень	Задает трехмерную ребристую границу. Эффект зависит от значение цвета границы	Играй »
вставка	Задает границу вставки 3D. Эффект зависит от значение цвета границы	Играй »
начало	Задает исходную трехмерную границу.Эффект зависит от значение цвета границы	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные	Играй »
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

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

Пример

Правый край паза:

div {
border-right-style: канавка;
граница-правая-цвет: коралловый;
ширина правой границы: 7 пикселей;
}

Попробуй сам »

Пример

Правый край гребня:

div {
border-right-style: гребень;
граница-правая-цвет: коралловый;
ширина правой границы: 7 пикселей;
}

Попробуй сам »

Пример

Вставка правая граница:

div {
стиль границы-справа: вставка;
граница-правая-цвет: коралловый;
ширина правой границы: 7 пикселей;
}

Попробуй сам »

Пример

Начальная правая граница:

div {
border-right-style: начало;
граница-правая-цвет: коралловый;
ширина правой границы: 7 пикселей;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Граница CSS

Ссылка CSS: свойство border-right

Ссылка

HTML DOM: borderRightStyle свойство

border-right — CSS: Каскадные таблицы стилей

Сокращенное свойство CSS border-right задает все свойства правой границы элемента.

Как и все сокращенные свойства, border-right всегда устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Он устанавливает для тех, которые не указаны, их значения по умолчанию. Это означает, что …

  border-right-style: пунктирная;
border-right: густо-зеленый;

… фактически то же самое, что …

  border-right-style: пунктирная;
border-right: без густого зеленого цвета;

… и значение border-right-style перед border-right игнорируется.Так как значение по умолчанию border-right-style — none , отсутствие указания части border-style приводит к отсутствию границы.

Это свойство является сокращением для следующих свойств CSS:

  граница справа: 1px;
граница справа: 2 пикселя с точками;
border-right: средний пунктирно-зеленый;

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

Значения

  || <стиль-линия> || <цвет> , где 
  <ширина строки> = <длина> | тонкий | средний | толстый 
 <стиль-линия> = нет | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | исход 
 <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
  где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 , где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |

Применение правой границы

HTML

  
  Это поле имеет рамку с правой стороны.

CSS

  div {
  border-right: синий пунктир 4px;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  font-weight: жирный;
  выравнивание текста: центр;
}

Результаты

таблиц BCD загружаются только в браузере

border-right-style — CSS: Cascading Style Sheets

Свойство border-right-style CSS устанавливает стиль линии правой границы элемента .

Примечание: Спецификация не определяет, как границы разных стилей соединяются в углах.

 
граница-правый-стиль: нет;
граница-правый-стиль: скрытый;
граница-правый-стиль: пунктирная;
граница-правый-стиль: пунктирная;
граница-правый-стиль: сплошной;
граница-правый-стиль: двойной;
граница-правый-стиль: канавка;
граница-правый-стиль: гребень;
граница-правый-стиль: вставка;
граница-правый-стиль: начало;


граница-правый-стиль: наследование;
граница-правый-стиль: начальный;
граница-правый-стиль: не задано;

Свойство border-right-style задается как одно ключевое слово, выбранное из тех, которые доступны для свойства border-style.

 <стиль строки> , где 
  <стиль строки> = none | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | outset

Стили границ

HTML

  <таблица>
  
     нет 
     скрыто 
     с точками 
     пунктир 
  
  
     твердый 
     двойной 
     паз 
     гребень 
  
  
     вставка 
     начало

CSS

 
Таблица {
  ширина границы: 2 пикселя;
  цвет фона: # 52E385;
}
tr, td {
  отступ: 3 пикселя;
}


.b1 {стиль границы-справа: нет;}
.b2 {стиль границы-справа: скрытый;}
.b3 {border-right-style: dotted;}
.b4 {border-right-style: dashed;}
.b5 {border-right-style: solid;}
.b6 {стиль границы-справа: двойной;}
.b7 {border-right-style: groove;}
.b8 {border-right-style: ridge;}
.b9 {border-right-style: inset;}
.b10 {border-right-style: outset;}

Результат

Таблицы BCD загружаются только в браузере

Свойство CSS: border-right-style | HTML Dog

Свойство CSS: border-right-style | HTML Собака

Вы здесь: Главная → Ссылки → CSS → Свойства →

Стиль правой границы рамки.

Стиль правой границы в сочетании со стилями нижней, левой и верхней границы также можно указать с помощью сокращенного свойства border-style .

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

Значение	Описание
`нет`	Без рамки.
`сплошная`	Сплошная линия.
`пунктирная`	Серия точек.
`пунктир`	Ряд тире.
`двойной`	Две сплошные линии.
`паз`	Изображение резного паза. Напротив гребня .
`гребень`	Изображение рельефного гребня. Напротив `проточка` .
`вставка`	Изображение углубления на вставке.Напротив `, нач.` .
`outset`	Изображение начального выдавливания. Напротив `врезка` .
`скрыто`	Используется с таблицами. То же, что и `, нет` , за исключением конфликтующих границ.
`наследование`
`начальное`
`снято`

Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

Пример

 
.catfish {граница-право-стиль: двойной; }

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

Поддерживается всеми современными браузерами.

Связанные страницы

Все свойства CSS

Учебники

Примеры

Главное меню

Дополнительное меню

↑ Вверх

граница справа · Документы WebPlatform

Сводка

Сокращенное свойство, которое определяет ширину границы, стиль границы и цвет границы правой границы элемента в одном объявлении.Обратите внимание, что вы можете использовать соответствующие полные свойства для установки определенных индивидуальных свойств правой границы — border-right-width, border-right-style и border-right-color.

Обзорная таблица

Начальное значение: Для значений стиля начальное значение - none. Для значений цвета начальное значение - currentColor. Для значений ширины начальное значение - среднее, которое в большинстве браузеров вычисляется как около 3 пикселей.
Относится к: Все элементы
Унаследовано: Нет
Медиа: визуал
Расчетное значение: Строковое представление «Для стиля … ароматные цвета.»Слишком длинный.
Анимационный: Да
Свойство объектной модели CSS: граница правая
В процентах: НЕТ

`Синтаксис`

border-right: ширина границы цвет стиля границы
граница-право: наследование

`Значения`

border-width, цвет стиля границы: Свойство border-right может содержать до трех компонентов:

border-width : принимает числовое значение с любыми стандартными единицами длины.
border-style : принимает любой из диапазона значений стиля, доступных для свойства border-style , который включает none , hidden , dotted , dashed , solid , double , паз , гребень , вставка , выемка . Дополнительные сведения о каждом из них см. На странице с рамкой .
цвет : значение может принимать любой допустимый цвет CSS.

наследовать: Когда мы устанавливаем значение , наследовать , элемент унаследует граничные значения, установленные для своего родителя.

`Примеры`

Простой пример, показывающий несколько

 , идентичных по стилю, за исключением того, что к ним применены разные свойства  border-right .
   Один
 
Два
 
Три
 
Четыре
 
Пять
 
  
 Посмотреть живой пример
 

div {
  ширина: 150 пикселей;
  высота: 50 пикселей;
  маржа: 1бэр;
  плыть налево;
}

п {
  отступ: 0.25рем;
}

.один {
  
  border-right: сплошной черный 1px;
}

.два {
  
  граница справа: пунктирная линия 4 пикселя;
}

.три {
  
  border-right: красный пунктир;
}

.four {
  
  граница справа: 10 пикселей черный;
}

.пять {
  
  граница: черная вставка 1px;
  border-right: вставка rgba 10 пикселей (234,190,50,0,75);
}
  
 Посмотреть живой пример
 Использование 
  * Свойство border-right обычно используется для установки состояния по умолчанию правой границы блока, а затем переопределения отдельных значений с использованием более конкретных свойств, таких как border-right-width или border-right-color. 
  border-right  можно использовать как разделитель между горизонтально расположенными элементами, такими как горизонтальное меню навигации или ячейки таблицы.
 См. Также 
 Статьи по теме 
 Граница 
 Связанные страницы 
 Коробка модель 
 Коробка модель
  Содержание 
 8.1 Размеры коробки
 8.2 Пример полей, отступов и границ
 8.3 Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'
 8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
 8.5 Свойства границ 8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
 8.5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
 8.5.3 Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'
 8.5.4 Сокращенные свойства границы: 'border-top', 'border-right', 'border-bottom', 'border-left' и 'border'
 8.6 Блочная модель для встроенных элементов в двунаправленном контексте
 Модель блока CSS описывает прямоугольные блоки, которые
сгенерирован для элементов в документе
дерево и разложено согласно визуальному форматированию
модель.
 В каждой коробке есть  область содержимого  (например,
текст, изображение и т. д.) и необязательное окружение  обивка ,  граница , и  маржа  область; размер
каждой области определяется свойствами, определенными ниже.Следующие
диаграмма показывает, как эти области связаны, и терминология, используемая для обозначения
на части поля, границы и заполнения:
 Поля, граница и отступы могут быть разбиты на верхнюю, правую и
нижний и левый сегменты (например, на схеме "LM" для левого поля,
«RP» для правого отступа, «TB» для верхней границы и т. Д.).
 Периметр каждой из четырех областей (контент, отступы, граница,
и поле) называется "краем", поэтому каждое поле имеет четыре края:
  край содержимого  или  внутренний край 
 Край содержимого окружает прямоугольник, заданный шириной и высотой.
окна, которые часто зависят от отображаемого содержимого элемента.Четыре края содержимого определяют
коробка  содержимое коробки .
  край обивки 
 Кромка набивки окружает набивку коробки. Если прокладка
имеет ширину 0, край заполнения такой же, как край содержимого.
Четыре края заполнения определяют
коробка  прокладка коробки .
  кромка 
 Край границы окружает границу рамки. Если граница
имеет ширину 0, край границы совпадает с краем заполнения.
Четыре граничных края определяют границу  коробки.
ящик .
  край поля  или  внешний
край 
 Край поля окружает поле поля. Если маржа
имеет ширину 0, край поля такой же, как край границы.
Четыре края поля определяют поле  поля.
ящик .
 Каждый край может быть разбит на верхний, правый, нижний и левый
край.
 Размеры области содержимого блока - ширина содержимого   и высота содержимого   -
зависят от нескольких факторов: генерирует ли элемент
коробка имеет ширину
или свойство 'высота'
установить, содержит ли поле текст или другие поля, независимо от того,
ящик стол и т. д.Обсуждаются ширина и высота коробки.
в главе о визуальном форматировании
детали модели.
 Стиль фона содержимого, отступов и границ области
поле определяется свойством 'background'
генерирующий элемент. Фон полей всегда прозрачен.
 В этом примере показано, как поля, отступы и границы
взаимодействовать. Пример HTML-документа:


  <ГОЛОВА>
     Примеры полей, отступов и границ 
    <СТИЛЬ type = "text / css">
      UL {
        фон: желтый;
        маржа: 12px 12px 12px 12px;
        отступ: 3px 3px 3px 3px;
                                     / * Границы не установлены * /
      }
      LI {
        цвет белый; / * цвет текста белый * /
        фон: синий; / * Контент, отступ будет синим * /
        маржа: 12px 12px 12px 12px;
        отступ: 12px 0px 12px 12px; / * Примечание с отступом 0px справа * /
        list-style: none / * перед элементом списка нет глифов * /
                                     / * Границы не установлены * /
      }
      LI.withborder {
        стиль границы: пунктирная;
        ширина границы: средний; / * устанавливает ширину границы со всех сторон * /
        цвет границы: салатовый;
      }
    
  
  <ТЕЛО>
    
       Первый элемент списка
      
 Второй элемент списка
           немного длиннее, чтобы проиллюстрировать упаковку.
    
  

 
 приводит к дереву документов с
(среди других отношений) элемент UL, который имеет два LI
дети.
 Первая из следующих диаграмм иллюстрирует, что этот пример
будет производить. Второй иллюстрирует взаимосвязь между
поля, отступы и границы элементов UL и его
дочерние элементы LI. (Изображение не в масштабе.)
 Обратите внимание, что:
 Ширина содержимого для каждого блока LI равна
рассчитывается сверху вниз; содержащий
блок для каждого блока LI устанавливается элементом UL.
 Высота поля поля каждого блока LI зависит от высоты его содержимого, плюс верх и низ
отступы, границы и поля.Обратите внимание, что вертикальные поля между
Ящики LI рушатся.
 Правое заполнение полей LI было установлено на нулевую ширину
(свойство padding). В
Эффект очевиден на второй иллюстрации.
 Поля блоков LI прозрачны - поля всегда
прозрачный - поэтому цвет фона (желтый) заполнения UL и
через них просвечиваются области содержания.
 Второй элемент LI определяет пунктирную границу (
свойство 'border-style').
 Свойства поля определяют ширину области поля поля.Сокращенное свойство 'margin' устанавливает
поля для всех четырех сторон, в то время как другие свойства полей устанавливаются только
их соответствующая сторона. Эти свойства применяются ко всем элементам, но
вертикальные поля не повлияют на незамещенные встроенные
элементы.
 Свойства, определенные в этом разделе, относятся к  <ширина-границы>  тип значения, который может принимать одно из следующих значений:
  <длина> 
 Задает фиксированную ширину.
  <процент> 
 Процент рассчитывается
относительно ширины   сгенерированного блока
содержащий блок.Обратите внимание, что это верно и для полей «верхняя граница» и «нижняя граница».
Если ширина содержащего блока зависит от этого элемента, то
результирующий макет не определен в CSS 2.1.
  авто 
 См. Раздел о расчете ширины и
поля для поведения.
 Отрицательные значения для свойств полей допустимы, но могут быть
ограничения, зависящие от реализации.
  'верхнее поле' ,  'нижнее поле' 
  Значение:  <ширина-маржи> | наследовать
  Начальный:  0
  Применимо к:  всем элементам, кроме элементов с табличным отображением
 типы, отличные от table-caption, table и inline-table
  Унаследовано:  нет
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Вычисленное значение:  указанный процент или абсолютная длина
 Эти свойства не влияют на незамещенные встроенные
элементы.
  'правое поле' ,  'левое поле' 
  Значение:  <ширина-маржи> | наследовать
  Начальный:  0
  Применимо к:  всем элементам, кроме элементов с табличным отображением
 типы, отличные от table-caption, table и inline-table
  Унаследовано:  нет
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Вычисленное значение:  указанный процент или абсолютная длина
 Эти свойства устанавливают верхнее, правое, нижнее и левое поле
коробка.
 Примеры:
h2 {margin-top: 2em}
 
  'маржа' 
  Значение:  <ширина-маржи> {1,4} | наследовать
  Начальное:  см. Отдельные свойства
  Применимо к:  всем элементам, кроме элементов с табличным отображением
 типы, отличные от table-caption, table и inline-table
  Унаследовано:  нет
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Расчетное значение:  см. Отдельные свойства
 «Маржа» - это
сокращенное свойство для установки 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном и том же месте в
таблица стилей.
 Если есть только одно значение компонента, оно применяется ко всем
стороны. Если есть два значения, верхнее и нижнее поля
установлены на первое значение, а правое и левое поля равны
установить на второй. Если есть три значения, верхний
установлен на первое значение, левый и правый установлены на
второй, а нижний установлен на третий. Если есть
четыре значения, они применяются к верхнему, правому, нижнему и левому,
соответственно.
 Примеры:
body {margin: 2em} / * все поля установлены на 2em * /
body {margin: 1em 2em} / * сверху и снизу = 1em, справа и слева = 2em * /
body {margin: 1em 2em 3em} / * сверху = 1em, right = 2em, bottom = 3em, left = 2em * /
 
 Последнее правило приведенного выше примера эквивалентно примеру
ниже:
тело {
  маржа сверху: 1em;
  маржа справа: 2em;
  нижнее поле: 3em;
  маржа слева: 2em; / * скопировано с противоположной стороны (справа) * /
}
 
 8.3.1 Сворачивающиеся поля 
 В CSS - смежные поля двух или более блоков (которые могут или
могут не быть братьями и сестрами) могут объединяться в единое поле. Маржа
которые сочетаются таким образом, говорят, что  коллапсирует , а
результирующая комбинированная маржа называется свернутой маржей  .
 Обрушение смежных вертикальных полей, кроме:
 Поля прямоугольника корневого элемента не сжимаются.
 Если верхнее и нижнее поля элемента с зазором соприкасаются, его
 поля схлопываются с прилегающими полями следующих братьев и сестер
 но это результирующее поле не сжимается с нижним полем
 родительского блока.
 Горизонтальные поля никогда не сжимаются.
 Два поля  примыкают к  тогда и только тогда, когда:
 оба принадлежат входным блокам уровня блока, которые
 участвовать в одном контексте форматирования блока
 без линий, без зазоров, без отступов и без границ
 их (обратите внимание, что определенная линия с нулевой высотой
 коробки (см. 9.4.2)
 игнорируются для этой цели.)
 оба принадлежат смежным по вертикали краям коробки, т. Е. Образуют одну из
 следующие пары: верхнее поле блока и верхнее поле его первого входящего дочернего элемента
 нижнее поле поля и верхнее поле его следующего входящего потока
 следующий брат
 нижнее поле последнего входящего дочернего элемента и нижнее поле его
 родительский, если родитель имеет "автоматически" вычисленную высоту
 верхнее и нижнее поля коробки, которая не устанавливает новый
 контекст форматирования блока, который имеет нулевое вычисленное значение 'min-height', zero или 'auto'
 вычисленная "высота", и нет
 притекающие дети
 Свернутая маржа считается прилегающей к другой марже, если таковая имеется
его составляющих полей примыкает к этому краю.
  Примечание.  Прилегающие поля могут быть
генерируется элементами, которые не связаны между собой как братья, сестры или предки.
  Примечание  приведенные выше правила подразумевают, что:
 Поля между плавающим ящиком
 и любой другой ящик не разрушается (даже между поплавком и его
 приточные дети).
 Поля элементов, которые устанавливают новые контексты форматирования блоков
 (например, поплавки и элементы с «переполнением», отличным от «видимого») делают
 не рухнуть со своими втекающими детьми.
 Поля абсолютно позиционированного
 ящики не разрушаются (даже со своими дочерними элементами).
 Поля inline-block box не сжимаются (даже с
 их притекающие дети).
 Нижнее поле входящего элемента уровня блока всегда
 сворачивается с верхним полем следующего уровня входящего блока
 брат или сестра, если у этого брата нет разрешения.
 Верхняя граница впускного блочного элемента схлопывается вместе с
 верхнее поле первого дочернего элемента на уровне блока, если элемент не имеет
 верхняя граница, без верхнего отступа и у дочернего элемента нет зазора.
 Нижнее поле прямоугольного блока в потоке с «высотой», равной «авто», и «минимальной высотой», равным нулю, схлопывается
 с нижним полем его последнего дочернего элемента на уровне блока, если поле
 не имеет нижнего отступа и нижнего края, а нижний край дочернего элемента
 margin не сжимается с верхним полем, имеющим зазор.
 Собственные поля блока сжимаются, если свойство min-height равно нулю,
 и у него нет ни верхней, ни нижней границы, ни верхнего или нижнего отступа,
 и имеет "высоту"
 0 или 'auto', и он не содержит строки, а все его
 приточные детские поля (если есть) обрушиваются.
 Когда два или более поля сжимаются, результирующая ширина поля равна
максимальная ширина сворачивающихся полей. В случае отрицательного
поля, максимум абсолютных значений отрицательного прилегающего
маржа вычитается из максимума положительного прилегающего
поля. Если положительных полей нет, максимум
Абсолютные значения прилегающих полей вычитаются из нуля.
 Если верхнее и нижнее поля блока
примыкающий, то можно поля до  обвалить через  его.В таком случае,
положение элемента зависит от его отношения к другому
элементы, поля которых сокращаются.
 Если поля элемента свернуты вместе с верхом его родительского элемента
 маржа, верхняя граница поля определяется как такая же, как
 родители.
 В противном случае либо родительский элемент не участвует в
 поле схлопывается, или только нижнее поле родителя
 вовлеченный. Положение верхнего края границы элемента такое же
 как было бы, если бы элемент имел ненулевую нижнюю границу.
 Обратите внимание, что позиции свернутых элементов
не влияют на положение других элементов с
чьи поля они обрушиваются; положение верхнего края границы
требуется только для определения потомков этих элементов.
 Свойства заполнения определяют ширину области заполнения поля. Сокращенное свойство padding устанавливает
padding для всех четырех сторон, в то время как другие свойства padding устанавливают только
их соответствующая сторона.
 Свойства, определенные в этом разделе, относятся к    тип значения, который может принимать одно из следующих значений:
  <длина> 
 Задает фиксированную ширину.
  <процент> 
 Процент рассчитывается с помощью
относительно ширины   сгенерированного содержащего блока блока, даже для
'padding-top' и 'padding-bottom'.
Если ширина содержащего блока зависит от этого элемента, то
результирующий макет не определен в CSS 2.1.
 В отличие от свойств полей, значения для значений заполнения не могут быть
отрицательный. Как и свойства полей, процентные значения для заполнения
Свойства относятся к ширине содержащего блока сгенерированного блока.
 Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение
коробка.
 Примеры:
цитата {padding-top: 0.3em}
 
  набивка 
  Значение:   {1,4} | наследовать
  Начальное:  см. Отдельные свойства
  Применимо к:  всем элементам, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column
  Унаследовано:  нет
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Расчетное значение:  см. Отдельные свойства
 Свойство padding - это
сокращенное свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте
в таблице стилей.
 Если есть только одно значение компонента, оно применяется ко всем
стороны. Если есть два значения, верхнее и нижнее отступы
установлены на первое значение, а правое и левое отступы
установить на второй. Если есть три значения, верхний
установлен на первое значение, левый и правый установлены на
второй, а нижний установлен на третий. Если есть
четыре значения, они применяются к верхнему, правому, нижнему и левому,
соответственно.
 Цвет поверхности или изображение области заполнения задается через
свойство background:
 Свойства границы определяют ширину, цвет и стиль области границы поля.Эти свойства
применяются ко всем элементам.
   Примечание.  В частности, для HTML,
пользовательские агенты могут отображать границы для определенных элементов пользовательского интерфейса (например,
кнопки, меню и т. д.) иначе, чем для
«обычные» элементы. 
 8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width',
'border-left-width' и
'border-width' 
 Свойства ширины границы определяют ширину области границы. Свойства
определенные в этом разделе относятся к  <ширина-границы>  тип значения, который может принимать одно из следующих значений:
  тонкий 
 Тонкая кайма.
  средний 
 Средняя граница.
  толстый 
 Толстая кайма.
  <длина> 
 Толщина границы имеет явное значение. Явный
ширина границы не может быть отрицательной.
 Интерпретация первых трех значений зависит от пользователя.
агент. Однако должны соблюдаться следующие отношения:
 'тонкий' <= 'средний' <= 'толстый'.
 Кроме того, эта ширина должна быть постоянной по всему документу.
 Эти свойства устанавливают ширину верхней, правой, нижней,
и левая граница поля.
  'ширина границы' 
  Значение:  <ширина границы> {1,4} | наследовать
  Начальное:  см. Отдельные свойства
  Применимо к:  всем элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  см. Отдельные свойства
 Это свойство является сокращенным свойством для установки
'ширина-границы',
'ширина-правая-граница',
'ширина-нижняя-граница',
 а также
'border-left-width' в
то же место в таблице стилей.
 Если есть только одно значение компонента, оно применяется ко всем
стороны. Если есть два значения, верхняя и нижняя границы
установлены на первое значение, а правая и левая стороны
установить на второй. Если есть три значения, верхний
установлен на первое значение, левый и правый установлены на
второй, а нижний установлен на третий. Если есть
четыре значения, они применяются к верхнему, правому, нижнему и левому,
соответственно.
 Примеры:
 В приведенных ниже примерах в комментариях указывается результирующая ширина.
верхней, правой, нижней и левой границ:
h2 {border-width: thin} / * тонкий тонкий тонкий тонкий * /
h2 {border-width: thin толстый} / * тонкий толстый тонкий толстый * /
h2 {border-width: тонкий толстый средний} / * тонкий толстый средний толстый * /
 
 8.5.2 Цвет границы:
'цвет верхней границы',
'граница-правый-цвет',
'цвет нижней границы',
'border-left-color' и
'цвет границы' 
 Свойства цвета границы определяют цвет границы блока.
  'цвет рамки' 
  Значение:  [<цвет> | прозрачный] {1,4} | наследовать
  Начальное:  см. Отдельные свойства
  Применимо к:  всем элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  см. Отдельные свойства
 Цвет рамки
свойство устанавливает цвет четырех границ.Значения имеют следующие
значения:
  <цвет> 
 Задает значение цвета.
  прозрачный 
 Граница прозрачная (хотя может иметь ширину).
 Цвет границы
свойство может иметь от одного до четырех значений компонентов, а значения
установлены с разных сторон, как для ширины границы.
 Если цвет границы элемента не указан
со свойством границы пользовательские агенты должны использовать значение
свойства color элемента как
вычисленное значение
для цвета границы.
 Примеры:
 В этом примере граница будет сплошной черной линией.
п {
  черный цвет;
  фон: белый;
  граница: сплошная;
}
 
 8.5.3 Стиль границы:
'border-top-style',
'border-right-style',
'border-bottom-style',
'border-left-style' и
'border-style' 
 Свойства стиля границы определяют стиль линии поля
граница (сплошная, двойная, пунктирная и т. д.). Свойства, определенные в этом
раздел относится к    тип значения, который может принимать одно из следующих значений:
  нет 
 Без границы; вычисленная ширина границы равна нулю.
  скрыто 
 То же, что «нет», за исключением пограничного конфликта
разрешение для элементов таблицы.
  с точками 
 Граница представляет собой серию точек.
  штриховые 
 Граница представляет собой серию коротких отрезков линии.
  цельный 
 Граница представляет собой одинарный отрезок линии.
  двойной 
 Граница - две сплошные линии. Сумма
две линии и пространство между ними
равно значению 'border-width'.
  паз 
 Бордюр выглядит как резной
в холст.
  ребро 
 Противоположность «пазу»: граница
выглядит так, будто выходит из холста.
  вставка 
 Граница придает прямоугольнику вид
он был встроен в холст.
  начальный 
 Противоположность «вставке»:
граница делает коробку похожей на
это выходило из холста.
 Все границы рисуются поверх фона рамки. Цвет
границы, нарисованные для значений 'Groove', 'Rridge', 'inset' и 'outset'
зависит от границы элемента
свойства цвета, но UA могут выбрать свой собственный алгоритм для
рассчитать фактические используемые цвета. Например, если цвет границы
имеет значение «серебро», тогда UA может использовать градиент цветов из
от белого до темно-серого, чтобы обозначить наклонную границу.
  "обрамление" 
  Значение:  <стиль границы> {1,4} | наследовать
  Начальное:  см. Отдельные свойства
  Применимо к:  всем элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение:  см. Отдельные свойства
 «Бордюрный стиль»
свойство устанавливает стиль четырех границ.Может иметь от одного до
четыре значения компонентов, а значения установлены с разных сторон, как для
'border-width' выше.
 Примеры:
# xy34 {border-style: сплошная точка}
 
 В приведенном выше примере горизонтальные границы будут "сплошными" и
вертикальные границы будут «пунктирными».
 Так как начальное значение стилей границ - «none», без границ
будет виден, если не задан стиль границы.
 8.5.4 Сокращенные свойства границ:
'граница-верх',
'граница-правая',
'нижняя граница',
'граница-левая' и
'border' 
 Это сокращенное свойство для установки ширины, стиля и
цвет верхней, правой, нижней и левой границы поля.
 Примеры:
h2 {border-bottom: толстый сплошной красный}
 
 Приведенное выше правило устанавливает ширину, стиль и цвет границы.  ниже  элемента h2. Пропущенные значения установлены на
их начальные значения. С
следующее правило не определяет цвет границы, граница будет
иметь цвет, указанный в
свойство 'color':
h2 {border-bottom: толстый сплошной}
 
 Свойство "граница" - это
сокращенное свойство для установки одинаковой ширины, цвета и стиля для
все четыре границы коробки.В отличие от сокращенных свойств margin и padding, свойство border не может устанавливать разные
ценности на четырех границах. Для этого одна или несколько других границ
свойства должны использоваться.
 Примеры:
 Например, первое правило ниже:
эквивалентен набору из четырех правил, показанных после него:
p {граница: сплошной красный}
п {
  border-top: сплошной красный;
  граница справа: сплошной красный;
  нижняя граница: сплошной красный;
  border-left: сплошной красный
}
 
 Поскольку в некоторой степени свойства перекрывают друг друга
функциональность, порядок, в котором указываются правила,
важный.
 Примеры:
 Рассмотрим этот пример:
blockquote {
  граница: сплошной красный;
  граница слева: двойной;
  черный цвет;
}
 
 В приведенном выше примере цвет левой границы черный,
в то время как другие границы красные. Это связано с тем, что 'border-left' устанавливает
ширина, стиль и цвет. Поскольку значение цвета не задается
свойство 'border-left', это
будет взят из "цвета"
имущество. Тот факт, что свойство 'color' устанавливается после свойства 'border-left', не
уместным.

Значение:	<ширина-маржи> \| наследовать
Начальный:	0
Применимо к:	всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано:	нет
Проценты:	относятся к ширине содержащего блока
Медиа:	визуальный
Вычисленное значение:	указанный процент или абсолютная длина

Значение:	<ширина-маржи> \| наследовать
Начальный:	0
Применимо к:	всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано:	нет
Проценты:	относятся к ширине содержащего блока
Медиа:	визуальный
Вычисленное значение:	указанный процент или абсолютная длина

Значение:	<ширина-маржи> {1,4} \| наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано:	нет
Проценты:	относятся к ширине содержащего блока
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Значение:	{1,4} \| наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column
Унаследовано:	нет
Проценты:	относятся к ширине содержащего блока
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Значение:	<ширина границы> {1,4} \| наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам
Унаследовано:	нет
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Значение:	[<цвет> \| прозрачный] {1,4} \| наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам
Унаследовано:	нет
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства

Значение:	<стиль границы> {1,4} \| наследовать
Начальное:	см. Отдельные свойства
Применимо к:	всем элементам
Унаследовано:	нет
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Отдельные свойства