border-right-style
Свойство CSS border-right-style используется для создания рамки в правой части элемента (правой границы) и одновременного указания ее стиля (вида).
Для изменения стиля рамки сразу всех сторон элемента можно использовать свойство border-style, а если для всех сторон стиль одинаковый, то border.
Тип свойства
Применяется: ко всем элементам.
Значения
Значением свойства border-right-style являются ключевые слова задающие стиль рамки.
| Значение | Описание | Пример |
|---|---|---|
| none | Рамка убрана, если указана толщина рамки, то она становится равной нулю (0). | none |
| hidden | Скрывает рамку. То же, что и none за исключением случая с ячейками таблицы, к которым применено свойство border-collapse: collapse . Тогда общая для двух ячеек граница не будет отображена вне зависимости от того, какая рамка имеется у соседней ячейки. | hidden |
| dotted | Рамка, состоящая из точек. | |
| dashed | Пунктирная рамка из коротких отрезков. | |
| solid | Сплошная линия. | |
| double | Двойная сплошная линия. | |
| groove | Вид рамки вырезанной в поверхности. | |
| ridge | Противоположно groove. Вид выступающей над поверхностью рамки. | |
| inset | Рамка, как будто блок вдавили в поверхность. | |
| outset | Противоположно inset. Рамка, будто блок выдавили из поверхности. | |
| inherit | наследует значение border-right-style от родительского элемента. |
Процентная запись: не существует.
Значение по умолчанию: none.
По одной стороне рамки тяжело понять ее внешний вид, для этого лучше посмотреть свойство border-style, где показаны стили рамок со всеми сторонами.
Синтаксис
Пример CSS: использование border-right-style
Результат. Использование свойства CSS border-right-style.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значения inherit и hidden .
свойство border-right-style
Свойство border-right-style определяет стиль правой границы блока. Стиль правой границы рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit.
Доступные стили:
Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. border-style — примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.
Специфические стили:
Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.
CSS свойство border-right-style
Это свойство определяет стиль правой стороны рамки HTML элемента.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Без рамки. |
| hidden | То же, что и none, за исключением разрешения конфликтов с рамками в элементах таблиц. |
| dotted | Рамка состоит из точек. |
| dashed | Рамка состоит из черточек.d> |
| solid | Сплошная линия. |
| double | Двойная сплошная линия. |
| groove | 3-D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color. |
| ridge | 3-D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color. |
| inset | 3-D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color. |
| outset | 3-D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Значение наследуется от родительского элемента. |
Пример
Устанавливаем стиль для правой стороны рамки параграфа
CSS-свойство: border
Свойство border HTML позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.
Стиль границы
Свойство border-style позволяет определить тип ( стиль ) границы.
Это свойство принимает разные значения :
- dotted – граница в точку;
- dashed – граница в штрих;
- solid – цельная граница;
- double – двойная граница;
- groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
- ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
- inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color ;
- outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color ;
- none – отключение;
- hidden – скрытые границы.
У свойства HTML border style может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).
Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style !
Border Width
Свойство border-width определяет ширину границы по любой из четырех сторон элемента.
Ширину можно указывать как в единицах измерения ( px, pt, cm, em и т. д. ), так и с помощью ключевых слов: thin , medium или thick .
У свойства border-width может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).
Border Color
Свойство HTML border-color используется, чтобы указать цвет границы для одной из четырех сторон элемента.
Цвет можно указывать несколькими способами :
- Названием – вписывается название цвета ( например, red );
- Hex – указывается hex-значение цвета ( например, #FF0000 );
- RGB – указывается RGB-значение цвета ( например, rgb(255,0,0) );
- transparent ( прозрачная ).
У свойства border-color может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).
Если не выставить свойство border-color , то границы будут наследовать цвет элемента.
Стилизация границ по-отдельности
В CSS есть свойства border HTML для определения стиля каждой стороны элемента ( top, right, bottom и left ).
Подобного результата можно добиться и следующим методом:
Как это работает
Если у свойства HTML border style будет четыре значения:
- border-style: dotted solid double dashed ;
- верхняя граница имеет значение dotted ;
- правая граница имеет значение solid ;
- нижняя граница имеет значение double ;
- левая граница имеет значение dashed .
Если у border-style будет три значения:
- border-style: dotted solid double ;
- верхняя граница имеет значение dotted ;
- правая и левая границы имеют значение solid ;
- нижняя граница имеет значение double .
Если у border-style будет два значения:
- border-style: dotted solid ;
- верхняя и нижняя границы имеют значение dotted ;
- правая и левая границы имеют значение solid .
Если у HTML border style будет одно значение:
- border-style: dotted ;
- то все четыре границы будут иметь значение dotted .
В примерах, приведенных выше, мы использовали свойство border-style . Но учтите, что те же правила применения касаются и border-width , и border-color .
Сокращенное свойство border
Как видно из примеров, при стилизации границ элементов нужно применять довольно много разных свойств. Чтобы сократить код, можно использовать специальное свойство border :
- border-width ;
- border-style ( обязательно );
- border-color .
Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.
CSS border-right-style Property
Description
The border-right-style CSS property sets the style of an element’s right border individually. However in many cases the shorthand CSS properties like border-style or border-right are more convenient to use and preferable.
The following table summarizes the usages context and the version history of this property.
| Default value: | none |
|---|---|
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | CSS 1, 2, 3 |
Syntax
The syntax of the property is given with:
| none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit |
The example below shows the border-right-style property in action.
Example
- p <
- border-right-style : dashed ;
- border-right-width : 3px ;
- >
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | No border will be displayed. |
| hidden | Same as none , except the case where table cells have collapsed borders and the two cells share a border. The hidden value ensures that no border is drawn, since hidden take precedence over all other border styles. |
| dotted | Displays the border as a series of dots. |
| dashed | Displays the border as a series of short line segments i.e. dashes. |
| solid | Displays the border as a single solid line. |
| double | Displays the border as a two parallel solid lines with some space between them. The sum of the two lines and the space between them equals the value of border-width . |
| groove | Displays the border as it were carved into the canvas. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the border-color . |
| ridge | Displays the border that has the opposite effect of groove . It also gives the impression of 3D, the border looks as though it were coming out of the canvas. |
| inset | Displays the border that makes the element’s box look as though it were embedded in the canvas. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the border-color . |
| outset | Displays the border that has the opposite effect of inset . It also gives the impression of 3D, the border makes the box look as though it were coming out of the canvas. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element border-right-style property. |
Browser Compatibility
The border-right-style property is supported in all major modern browsers.
Basic Support—
- Firefox 1+
- Google Chrome 1+
- Internet Explorer 4+
- Apple Safari 1+
- Opera 4+
Warning: Internet Explorer 7 and earlier versions don’t support the value hidden . IE8 supports, but requires a . IE9 and above supports the hidden value.
Свойство CSS border-right-style
p
<
border-style:solid;
border-right-style:dotted;
>
Описание и использование
Свойство CSS border-right-style задает стиль правого бордюра элемента.
| Значение по умолчанию | нет |
|---|---|
| Наследование | нет |
| Версия CSS | CSS 1 |
| Синтаксис JavaScript | object.style.borderRightStyle=»dotted» |
Поддержка в браузерах
Свойство border-right-style поддерживается всеми основными браузерами.
Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit или hidden.
border-right-style
| Браузер | Internet Explorer | Netтscape | Опера | Safari | Mozilla Firefox | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Краткая информация
| CSS (ЦСС) | CSS (ЦСС)1 |
|---|---|
| Значение по умолчанию | Нет |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Аналог ШТМЛ | | |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.ШТМЛ#border-style-properties |
Описание
Устанавливает стиль границы справа от элемента.
Синтаксис
Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-right-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 2.
Рис. 2. Применение параметра border-right-style
CSS :: Свойство border-right-style
css -свойство border-right-style (от англ. right border style – стиль правой границы) используется для установки стиля правой границы элемента.
Характеристики
- Значение по умолчанию: none .
- Применяется: ко всем элементам .
- Наследуется: нет .
- Анимируется: нет .
- JavaScript: object.style.borderRightStyle=»value» .
Синтаксис
border-right-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]
Блог Vaden Pro
- 10 просмотров
Характеристики свойства
В каких браузерах работает?
| 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
В каких версиях CSS используется?
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| — | + | + | + |
Для чего используется?
Аналогичное свойство по своим функциям к border-top-style, с единственным отличием, что фиксирует особый стиль линии для правой стороны. Обобщающим свойством для редактирования правой границы является border-right, через это свойство прописывается еще и цвет, и толщина линии. Тоже самое для всех сторон делают через border.
Как правильно задавать?
Какие могут быть значения?
- none — убирает рамки из вывода.
- hidden — соответствует функциям значения none, но применяется только для таблиц.
- dotted — линия рамки представлена точками.
- dashed — граница представлена пунктирной полосой.
- solid — обычная не прерывистая линия.
- double — рамка представлена двумя тонкими параллельными полосами.
- groove — представляет трехмерный эффект вдавленной рамки.
- ridge — представляет трехмерный эффект выпуклой рамки.
- inset — эффект объемной линии в двухмерном формате.
- outset — эффект объемной линии в двухмерном формате.
- inherit — повторяет рамку родительского элемента
Наглядный пример использования различных видов рамок:
dotted dashed solid double groove ridge inset outset
Наибольшее распространение на практике получили двухмерные линии, однако довольно часто используются объемные рамки для создания эффекта трехмерной кнопки, которая, к примеру, отвечает за выплывание формы обратной связи. Такой прием очень популярен при создании Landing Page.
CSS border-right-style Property
CSS border-right-style property sets the right border style of an element.
Usages
The following table outline the usages and version history of this property.
| Default value: | none |
| Applies to: | All elements |
| Inherited: | No |
| Version: | CSS1 |
| JavaScript Syntax: | object.style.borderRightStyle = «double» |
Syntax
Here is a syntax for the CSS border-right-style property
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | Default. Displays no border. |
| hidden | same as none , except table cells border conflict resolution |
| dotted | Displays the border as a series of rounded dots |
| dashed | Displays the border as a series of short square dashes |
| solid | Displays the border as a single solid line |
| double | Displays the border as a two parallel solid lines with some space between them equals the value of border-width. |
| groove | Displays the border as a grooved border. It’s depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color |
| ridge | Displays the border as a r >groove effect. |
| inset | Displays the border as a inset border, it’s look as though it were embedded in the canvas. It’s depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color |
| outset | Displays the border as a outset border that is opposite of inset effect. |
| initial | Sets default value of this property |
| inherit | Inherits this property from its parent element. |
Examples
The example below shows to sets border right style.
Browser Compatibility
- Google Chrome 1+
- Mozilla Firefox 1+
- Internet Explorer 4+
- Opera 4+
- Safari 1+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.
