border-right-width в CSS


CSS border-right-w >Last update on November 09 2020 06:56:06 (UTC/GMT +8 hours)

border-right-width property

CSS border-right-width property sets the width of a box’s right border.

Syntax:

Values

width: Width of the right border of a box. The following table shows the values :

Value Description
thin A thin border is set if specified
medium A medium border is set if specified.
thick A thick border is set if specified
length You may use em, ex, in(for inches), cm(for centimeters), mm(for millimeters), pt(for points), pc(for picas), px(for pixel).
inherit Specifies that the border width should be inherited from the parent element

inherit: If set, the associated element takes computed value of its parent element’s border-right-width property.

Initial value

Applies to

border-right-width property can be applied to all HTML elements which may form a box.

Inherited

Percentages

Media

Computed value

If the value set to none or hidden, it is 0, else it is an absolute value.

Browser compatibility

Browser Version
Internet Explorer 4.0 and above
Firefox (Gecko) 1.0 and above
Opera 3.5 and above
Safari (WebKit) 1.0 and above

Example of border-right-width property

CSS code:

HTML code:

View this example in a separate browser window

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

Это свойство определяет толщину правой стороны рамки HTML элемента.

Внимание: Следует всегда определять свойство border-style перед свойством border-right-width. Элемент должен иметь рамку, прежде чем менять ее толщину.

CSS синтаксис

Возможные значения

Значение Описание
medium Значение по умолчанию. Средняя толщина рамки.
thin Тонкая рамка.
thick Толстая рамка.
толщина Позволяет устанавливать толщину рамки в единицах измерения (например, в px).
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Устанавливаем толщину правой стороны рамки параграфа

border-right-w > IE Opera Chrome Firefox Safari IE до 7.0 (включ.) не поддерживает значение inherit и hidden + + + +

Пример

Прописываем ширину для правой границы:

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

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

Примечание: Всегда прописывайте свойство border-style перед свойством border-right-width. У элемента должна быть граница, прежде чем менять ее ширину.

CSS border-right-width Property

Description

The border-right-width CSS property sets the width of an element’s right border individually. However in many cases the shorthand CSS properties like border-width 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: medium
Applies to: All elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

thin | medium | thick | length | initial | inherit

The example below shows the border-right-width property in action.

Example

  • p <
  • border-style : solid ;
  • border-right-width : 15px ;
  • >

Note: You must declare the border-style property before the border-bottom-width property. An element must have borders before you can set the width of the border, because the default value of the border-style property is none .

Property Values

The following table describes the values of this property.

Value Description
thin A thin border.
medium A medium border.
thick A thick border.
length A length value in px , pt , cm , em , etc. Negative values are not allowed.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element border-right-width property.

Browser Compatibility

The border-right-width property is supported in all major modern browsers.

CSS — border-right-width

Description

Sets the width of the right border of an element.

Possible Values

length − Any length unit. Length units for this property may not be negative.

thin − A border which is thinner than a border set to medium.

medium − A border which is thicker than a border set to thin, and thinner than a border set to thick.

thick − A border which is thicker than a border set to medium.

Applies to

All the HTML elements.

DOM Syntax

Example

Following is the example to show all the border width −

border-right-width

Браузер 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
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ |
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#border-width-properties

Описание


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

Синтаксис

border-right-width: thin | medium | thick | значение

Аргументы

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

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

CSS :: Свойство border-right-w >Описание

css -свойство border-right-w >англ. right border width – ширина правой границы) используется для установки ширины правой границы элемента.

Характеристики

  • Значение по умолчанию: medium .
  • Применяется: ко всем элементам .
  • Наследуется: нет .
  • Анимируется: да .
  • JavaScript: object.style.borderRightW .

Синтаксис

border-right-width: [ | thin | medium | thick]

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-width Property

CSS border-right-width property sets the border right width of an element.

Usages

The following table outline the usages and version history of this property.

Default value: medium
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderRightW

Syntax

Here is a syntax for the CSS border-right-width property

Property Values

The following table describes the values of this property.

Value Description
medium Default. Set a medium border
thin Set a thin border
thick Set a thick border
length Set length value in px, pt, cm, em, etc that define border thickness
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets border right width.

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • 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 border-right-width

p
<
border-style:solid;
border-right-width:15px;
>

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

Свойство CSS border-right-width задает ширину левого бордюра элемента.

Заметка: всегда задавайте свойство border-style перед свойством border-right-width. Элемент должен иметь бордюры, для которых вы хотите изменить ширину.

Значение по умолчанию medium
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderRightW

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

Свойство border-right-width поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

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