Border right: border-right | htmlbook.ru

Leave a Comment / Разное / By /

border-right | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Значение по умолчаниюЗависит от использования
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Свойство 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.

Границы

CSS по теме

  • border-right

Статьи по теме

  • Колонки одинаковой высоты через border
  • Макет из двух колонок
  • Фиксированный дизайн. Макет из трех колонок

Рецепты CSS

  • Как создать рамку со скругленными уголками без изображений?

border-right-width | CSS | WebReference

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

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

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

Синтаксис

 border-right-width: <размер> | thin | medium | thick
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*
Повторять ноль или больше раз.		[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  background: #e4efc7;
  border-right: double #333;
  padding: 10px;
  border-right-width: {{ playgroundValue }}px;
}

Пример

<!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> Модальное письмо может быть реализовано на основе принципов центропостоянности и центропеременности, таким образом шоу-бизнес интуитивно понятен.
</div> </body> </html>

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

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

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

Объект.style.borderRightWidth

Примечание

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

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

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

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

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4
8		1219. 211
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Границы

См. также

  • border-bottom-width
  • border-left-width
  • border-top-width
  • border-width

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

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

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

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

 /* Значения ключевых слов */
правый стиль границы: нет;
стиль границы справа: скрытый;
граница справа: пунктирная;
стиль границы справа: пунктир;
стиль границы справа: сплошной;
стиль границы справа: двойной;
граница справа: канавка;
граница справа: ребро;
стиль границы справа: вставка;
стиль границы справа: начало;
/* Глобальные значения */
стиль границы справа: наследовать;
стиль границы справа: начальный;
правый стиль границы: вернуться;
стиль границы справа: обратный слой;
стиль границы справа: не установлен;

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

Исходное значение нет
Применяется ко всем элементам. Это также относится к ::first-letter .
Унаследовано нет
Расчетное значение как указано
Тип анимации дискретный
 border-right-style = 
  
 "> = 
 нет | 
 скрытый | 
 пунктирный | 
 пунктирный | двойной 
61 сплошной | 
 канавка | 
 ребро | 
 вставка | 
 начало 
 
 Стили границ 
 HTML 
 
 CSS 
 /* Определить внешний вид таблицы */
стол {
  ширина границы: 2px;
  цвет фона: #52e385;
}
тр,
тд {
  отступ: 3px;
}
/* примеры классов в стиле границы справа */
.
  b1 {
  правый стиль границы: нет;
}
.Би 2 {
  стиль границы справа: скрытый;
}
.b3 {
  граница справа: пунктирная;
}
.b4 {
  стиль границы справа: пунктир;
}
.b5 {
  стиль границы справа: сплошной;
}
.b6 {
  стиль границы справа: двойной;
}
.b7 {
  граница справа: канавка;
}
.b8 {
  граница справа: ребро;
}
.b9 {
  стиль границы справа: вставка;
}
.b10 {
  стиль границы справа: начало;
}
 
 Результат 

  

    нет
    скрытый
    точечный
    пунктир
  

  

    твердый
    двойной
    канавка
    гребень
  

  

    вставка
    начало
  


 
 Спецификация
 Фоны CSS и Borders Module Level 3 
  # Нагрузка на Brazer STYLE 
 9009
 BCDAL-STYLE 
 BCDAL-STYLE 
 BCDAL-STYLE. Включите JavaScript для просмотра данных.
 
  •  Другие свойства границ, связанные со стилем:  border-bottom-style  ,  border-left-style  ,  border-top-style  и  border-style  .
  •  Другие свойства, связанные с правой границей:  border-right  ,  border-right-color  и  border-right-width  .
 Обнаружили проблему с содержанием этой страницы? 
  •  Отредактируйте страницу на GitHub.
  •  Сообщить о проблеме с содержимым.
  •  Посмотреть исходный код на GitHub.
 Хотите принять участие?
 Узнайте, как внести свой вклад.
 Последнее изменение этой страницы:  от участников MDN.
 border-right-width - CSS: Каскадные таблицы стилей 
 Свойство CSS   border-right-width   устанавливает ширину правой границы элемента.
 /* Значения ключевых слов */
ширина границы справа: тонкая;
ширина границы справа: средняя;
ширина правой границы: толстая;
/* значения <длины> */
ширина правой границы: 10em;
ширина правой границы: 3vmax;
ширина границы справа: 6px;
/* Глобальные ключевые слова */
ширина правой границы: наследовать;
ширина границы справа: начальная;
ширина правой границы: вернуться;
граница-правая-ширина: обратный слой;
ширина правой границы: не задана;
 
 Значения 
   
 Определяет ширину границы либо как явное неотрицательное значение  <длина> , либо как ключевое слово. Если это ключевое слово, оно должно иметь одно из следующих значений:
.
  •   тонкий 
  •   средний 
  •   толстый 
  Примечание:  Поскольку спецификация не определяет точную толщину, обозначаемую каждым ключевым словом, точный результат при использовании одного из них зависит от реализации. Тем не менее, они всегда следуют схеме  тонкий ≤ средний ≤ толстый  , и значения постоянны в пределах одного документа.
 Исходное значение  средний 
 Применяется ко всем элементам. Это также относится к  ::first-letter  .
 Унаследовано нет
 Вычисленное значение абсолютная длина или  0  если  border-right-style  или
4 скрыто 
40005
 Тип анимации a длина
 border-right-width = 
  
 "> = 
  средний | 
 толстый 
 
 Сравнение ширины границ 
 HTML 
 
Элемент 1


Элемент 2

 
 CSS 
 раздел {
  граница: 1px сплошной красный;
  поле: 1em 0;
}
div: n-й ребенок (1) {
  ширина правой границы: толстая;
}
div: n-й ребенок (2) {
  ширина правой границы: 2em;
}
 
 Результат 
 Спецификация
 Фоны CSS и Borders Module Level 3 
  # BORDER-WIDTH 
 9009
 BCDTH WIDTH 
 BCDTH TAGLESARAL.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *