Css border right: border-right — CSS: Cascading Style Sheets

Leave a Comment / Css / 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-style | WebReference

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

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

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

Синтаксис

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

Значения

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

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

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

Песочница

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

nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

div {
  padding: 10px; 
  border: 5px #fc0;
  border-right-style: {{ playgroundValue }};
}

Пример

<!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> Очевидно, что контрапункт контрастных фактур выстраивает громкостнoй прогрессийный период.   </div> </body> </html>

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

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

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

Объект.style.borderRightStyle

Примечание

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

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

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

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

Браузеры

471213. 511

Границы

См. также

  • border-bottom-style
  • border-left-style
  • border-style
  • border-top-style

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

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

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

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

На самом деле он такой же, как этот:

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

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

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

  • border-right-color
  • граница справа
  • граница-правая ширина 
 граница справа: 1 пиксель;
граница справа: 2 пикселя с точками;
граница справа: средний пунктирный зеленый;
/* Глобальные значения */
граница справа: наследовать;
граница справа: начальная;
граница справа: вернуться;
граница справа: обратный слой;
граница справа: не установлена;

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

Значения

См. border-right-width .

<бр-стиль>

См. border-right-style .

<цвет>

См. border-right-color .

Начальное значение как каждое из свойств стенографии:
  • border-right-width : Средняя
  • Граница-вустен. Это также относится к ::first-letter .
Унаследовано нет
Вычисленное значение как каждое из свойств сокращения:
  • border-right-width 5 :

    004 0

    if border-right-style is none or hidden
  • border-right-style : as specified
  • border-right-color : computed color
Animation введите как каждое из свойств сокращенной записи:
  • border-right-color : цвет
  • border-right-style : дискретный
  • border-right-width : длина0036
 border-right = 
  || 
 <стиль строки> || 
 <цвет> 
 "> = 
  | 
 тонкий | 
 средний | 
 толстый 
 
 "> = 
 нет | 
 скрыто | 
 с точками | 
 пунктир | 
 твердый | 
 двойной | 
 канавка | 
 хребет | 
 вставка | 
 начало

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

HTML 
 
Это поле имеет границу справа.
CSS 
 раздел {
  граница справа: 4 пикселя пунктирная синяя;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  вес шрифта: полужирный;
  выравнивание текста: по центру;
}
Результаты
Спецификация
Фоны CSS и границы.0007 с включенным JavaScript. Включите JavaScript для просмотра данных.
  • граница
  • пограничный блок
  • контур

Последнее изменение: , участниками MDN

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

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

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

h2 {
  правая граница: 5 пикселей сплошной красный цвет;
}

h3 {
граница справа: 4 пикселя с синими точками;
}

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

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

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

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

  • border-right-width
  • стиль границы справа (обязательно)
  • граница правого цвета

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

Показать демо ❯

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

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

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

Собственность
граница правая 1,0 4,0 1,0 1,0 3,5

Синтаксис CSS

border-right: border-width border-style border-color |initial|inherit;

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

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

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

Учебник CSS: Граница CSS

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

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

0205 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
9027 9027 FORUM | О

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

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

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