Свойство стиля borderStyle
Пример
Добавьте «сплошную» границу к элементу <div>:
document.getElementById("myDiv").style.borderStyle = "solid";
Определение и использование
Свойство borderStyle задает или возвращает стиль границы элемента.
Это свойство может принимать от одного до четырех значений:
- Одно значение, например: p {border-style: solid} — все четыре границы будут сплошными.
- Два значения, например: p {border-style: solid dotted} - верхняя и нижняя границы будут сплошными, левая и правая границы будут пунктирными.
- Три значения, например: p {border-style: solid dotted double} - верхняя граница будет сплошной, левая и правая границы будут пунктирными, нижняя граница будет двойной.
- Четыре значения, например: p {border-style: solid dotted double dashed} - верхняя граница будет сплошной, правая граница будет пунктирной, нижняя граница будет двойной, левая граница будет пунктирной.
Поддержка браузера
Property | |||||
---|---|---|---|---|---|
borderStyle | Yes | Yes | Yes | Yes | Yes |
Синтаксис
Верните свойство borderStyle:
object.style.borderStyle
Задайте свойство borderStyle:
object.style.borderStyle = value
Значения свойств
Value | Description |
---|---|
none | Defines no border. This is default |
hidden | The same as "none", except in border conflict resolution for table elements |
dotted | Defines a dotted border |
dashed | Defines a dashed border |
solid | Defines a solid border |
double | Defines two borders. The width of the two borders are the same as the border-width value |
groove | Defines a 3D grooved border. The effect depends on the border-color value |
ridge | Defines a 3D ridged border. The effect depends on the border-color value |
inset | Defines a 3D inset border. The effect depends on the border-color value |
outset | Defines a 3D outset border. The effect depends on the border-color value |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Технические детали
Значение по умолчанию: | никто |
---|---|
Возвращаемое значение: | Строка, представляющая стиль границы элемента. |
CSS-версия | CSS1 |
Дополнительные примеры
Пример
Измените стиль четырех границ элемента <div>:
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Пример
Вернуть стиль границы элемента <div>:
alert(document.getElementById("myDiv").style.borderStyle);
Пример
Демонстрация всех различных значений:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Связанные страницы
Учебное пособие по CSS: граница CSS
Справочник по CSS: свойство в стиле границы
Справочник по HTML DOM: свойство границы
❮ Объект стиля