CSS свойство border-left-w >
Это свойство определяет толщину левой стороны рамки HTML элемента.
Внимание: Следует всегда определять свойство border-style перед свойством border-left-width. Элемент должен иметь рамку, прежде чем менять ее толщину.
CSS синтаксис
Возможные значения
Значение | Описание |
---|---|
medium | Значение по умолчанию. Средняя толщина рамки. |
thin | Тонкая рамка. |
thick | Толстая рамка. |
толщина | Позволяет устанавливать толщину рамки в единицах измерения (например, в px). |
initial | Устанавливает значение по умолчанию. |
inherit | Значение наследуется от родительского элемента. |
Пример
Устанавливаем толщину левой стороны рамки параграфа
CSS border-left-width Свойство
Пример
Задайте ширину левой границы:
Подробнее примеры ниже.
Определение и использование
Свойство border-left-width задает ширину левой границы элемента.
Примечание: Перед свойством всегда объявляйте свойство border-style или Border-left border-left-width . Элемент должен иметь границы, прежде чем можно изменить ширину.
Значение по умолчанию: | medium |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.borderLeftW |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
border-left-w >
IE
Opera
Chrome
Firefox
Safari
IE до 7.0 (включ.) не поддерживает значение inherit
+
+
+
+
Пример
Прописываем ширину для левой границы:
Описание и использование
Свойство border-left-width задает ширину левой границы элемента.
Примечание: Всегда прописывайте свойство border-style перед свойством border-left-width. У элемента должна быть граница, прежде чем менять ее ширину.
Свойство CSS border-left-width
p
<
border-style:solid;
border-left-width:15px;
>
Описание и использование
Свойство CSS border-left-width задает ширину левого бордюра элемента.
Заметка: всегда задавайте свойство border-style перед свойством border-left-width. Элемент должен иметь бордюры, для которых вы хотите изменить ширину.
Значение по умолчанию | medium |
---|---|
Наследование | нет |
Версия CSS | CSS 1 |
Синтаксис JavaScript | object.style.borderLeftW |
Поддержка в браузерах
Свойство border-left-width поддерживается всеми основными браузерами.
Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.
CSS :: Свойство border-left-w >Описание
css -свойство border-left-w >англ. left border width – ширина левой границы) используется для установки ширины левой границы элемента.
Характеристики
- Значение по умолчанию: medium .
- Применяется: ко всем элементам .
- Наследуется: нет .
- Анимируется: да .
- JavaScript: object.style.borderLeftW .
Синтаксис
border-left-width: [ | thin | medium | thick]
CSS border-left-w >Last update on November 09 2020 06:56:06 (UTC/GMT +8 hours)
border-left-width property
CSS border-left-width property sets the width of a box’s left border.
Syntax:
Values
width: Width of the left 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-left-width property.
Initial value
Applies to
border-left-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-left-width property
CSS code:
HTML code:
View this example in a separate browser window
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-left-width
Материал из WebWikiABCD
Содержание
Атрибут border-left-width | Свойство borderLeftWidth
Это свойство устанавливает ширину левой границы элемента.
Синтаксис
HTML | |
Скрипты | [ sW > |
Возможные значения
sWidth Строка, которая может определять и принимать одно из следующих значений:
medium | Значение по умолчанию. |
thin | Делает границу немного тоньше, чем при значении по умолчанию. |
thick | Делает границу немного толще, чем при значении по умолчанию. |
width | Граница задается вещественным числом. Допустимо использовать следующие единицы измерения: cm, mm, in, pt, pc, em, ex, или px. Более подробно допустимые значения толщины описаны в CSS Length Units Reference. |
Свойство borderLeftWidth не наследуется, то есть должно быть определено отдельно для каждого элемента. Значением по умолчанию является medium.
Замечания
В Internet Explorer 5.5 borderLeftWidth применяется для строковых объектов. В ранних версиях Windows Internet Explorer строковые объекты должны были быть описаны с помощью position: absolute, чтобы использовать это свойство. Формат элемента устанавливается путем задания значений свойствам height и width.
Как правило, граница отображается со следующей толщиной: thin — 2 пикселя, medium — 4 пикселя и thick — 6 пикселей. В разных браузерах эти значения варьируются, поэтому для точного отображения лучше задавать цифровое значение в пикселях или других единицах, например: border-left-width: 5px.
Примеры
Следующие примеры иллюстрируют применение свойства borderLeftWidth и атрибута border-left-width для задания ширины левой границы объекта.
В первом примере используется атрибут border-left-width, чтобы задать ширину левой границы элемента равной 1 сантиметру при клике курсором мыши по объекту.
Во втором примере для изменения ширины левой границы элемента на более толстую, равную 1 сантиметру, применяется свойство borderLeftWidth.
Стандарты
Поддерживаемые браузеры
Internet Explorer 8.0, в версиях 6.0 и 7.0 возможны ошибки
Firefox 1.5, 2.0, 3.0
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Смотри также
border, CSS Enhancements in Internet Explorer 6
CSS border-left-w >
The CSS border-left-width property allows you to set the width of a left border.
You can also use border-width to set the width for all sides of your element, or border-left to set all border properties for the left border.
The default width for borders is medium .
If you use a border without specifying its color, it will use the currentColor value (which is the value of the color property).
The border’s style needs to be specified before it can be displayed. You can use either border-left-style or border-style to specify the border’s style.
Syntax
These values are explained below.
Possible Values
Although the initial border width is medium , the initial style is none and therefore the used width is 0 . Therefore, you need to set the border-left-style (or border-style ) before the border will appear.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
CSS border left w > Tutorialdeep » CSS Property » CSS » CSS border left width
CSS border left width is used to set the left border width for html element. The border left for an html element can be display using three properties combination. These three properties are CSS border-left-width, CSS border-left-style and CSS border-left-color.
The syntax for CSS border-left-width is:
This is the HTML paragraph inside the div for background size text. This div used to show the border left. This border has given here to display border.
CSS border left width values list
The values and description of this property is used for CSS border left width to specify the border.
Sr. No. | value | Description |
---|---|---|
1 | border-width | Used to give width of border. The value for this can be in pixel format or percentage format. Check CSS border-width for more detail. |
2 | initial | Used to define as the property initial value. |
2 | inherit | Used to define the computed value of property on the elements parent. |
CSS border left widthr dotted
In this example we will use to show dotted border-left.