border-right-style в CSS


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.

Илон Маск рекомендует:  Псевдоклассы в CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL