background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-gap
column-rule
column-width
content
counter-increment
cursor
direction
display
empty-cells
height
quotes
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
resize
right
unicode-bidi
vertical-align
visibility
z-index
Interner Explorer
-ms-radial-gradient
background-position-x
background-position-y
---------------
filter
hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила
@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации
A
#id
.class
.class1.class2
*
A B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы
:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы
::after (:after)
::before (:before)
::first-letter
::first-line
::selection
---------------
Функции
attr()
calc()
---------------
Значения свойств
Строки
Числа
Проценты
Размер
Адрес
Цвет
Угол
Медиа-запросы
inherit
initial
Помогли мы вам |
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
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 1 | CSS 2 | CSS 2.1 | CSS 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 class="line">
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.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
- © border-left-color
- © border-left
- © border-color
- © border-bottom-width
- © border-bottom-style
- © border-bottom-color
- © border-bottom
- © border
- © background-origin
- © background - «Учебник CSS»
|
|
- Новости мира Интернет
- Афоризмы
- Видео уроки
- Справочник CSS
Intel заявила о готовности к производству встроенной памяти MRAM - «Новости сети»
Гарнитура Galaxy Buds — без встроенного плеера, но с беспроводной зарядкой - «Новости сети»
Meizu проведёт презентацию в начале марта: ожидается анонс смартфона Note 9 - «Новости сети»
В России появится Национальный космический центр - «Новости сети»
Skoda показала интерьер электрического кроссовера Vision iV - «Новости сети»
Tesla готовится предложить лизинг электромобиля Model 3 для повышения спроса - «Новости сети»
В марте NVIDIA выпустит GeForce GTX 1650 — Turing за $179 - «Новости сети»
Enermax SquA RGB: вентилятор охлаждения с необычным дизайном - «Новости сети»
Arctic Freezer 50 TR: кулер для Ryzen Threadripper с возможностью пассивного охлаждения - «Новости сети»
Длина ускорителей Galax RTX 2070 Mini и RTX 2060 Mini составляет 175 мм - «Новости сети»
Смартфон Realme 3 получит чип Helio P70 и двойную камеру - «Новости сети»
Canon готовит компактный фотоаппарат PowerShot G5 X Mark II - «Новости сети»

Веб-приложение на asp.net mvc core — #9 Presentation Layer: cоздание сервисов. Часть 2 - «Видео уроки - CSS»

Инстаграм здорового человека. Часть 2 - «Видео уроки - CSS»

Уязвимости ВКонтакте, АнтБот, Дополненная реальность в полиции - «Видео уроки - CSS»

Заработок В BitRush. Выход В Плюс. Выводим деньги / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

Как Заработать В Интернете 5000 Рублей Без Знаний В Проекте 24 HOURS / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

Веб-приложение на asp.net mvc core — #8 Presentation Layer: создание уровня представления - «Видео уроки - CSS»

Открытая лекция: «Лендинг за час» - «Видео уроки - CSS»

Основы After Effects — #8 Рендеринг и экспорт видео - «Видео уроки - CSS»

Одноклассники. IOS и Frontend-разработчики - «Видео уроки - CSS»

Как Заработать 1000 Рублей за Сутки В Новом Проекте "24HOURS". Новинка / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

ЗАРАБОТОК В 24HOURS +10% КАЖДЫЙ ДЕНЬ. ВЫВОДИМ ПЕРВЫЕ ДЕНЬГИ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

САЙТ ДЛЯ ЗАРАБОТКА БЕЗ ВЛОЖЕНИЙ 1000 РУБЛЕЙ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
! | |||
B | border-left-color | border-top | |
C | column-count | columns
|
counter-reset
|
D | E
|
H
|
Q
|
F
|
L
|
M
|
O |
P
|
W
|
T
|
text-shadow |
R | U
|
V | Z
|
Firefox | Opera | Safari и Chrome | |
-moz-border-bottom-colors
|
-moz-orient
|
-o-linear-gradient
|
-webkit-linear-gradient
|
@-правила | |||
@font-face | @media |
Селекторы и их комбинации | |||
A
|
A B
|
[attr]
|
[attr~='value']
|
Псевдоклассы | |||
:active
|
:enabled
|
:hover | :not
|
:only-child
|
:read-only | :target
|
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.