border-style

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

Значения

Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none Не отображает границу и ее толщина ( border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

Табл. 2. Зависимость результата использования от числа значений

Число значений	Результат
1	Стиль границы будет задан для всех сторон элемента.
2	Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3	Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

HTML5 CSS2.1 IE Cr Op Sa Fx

       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Рис. 1. Применение свойства border-style

Объектная модель

[window.]document.getElementById(» elementID «).style.borderStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Источник

border

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none .

border: 1px; border: 2px dotted; border: medium dashed green;

Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Синтаксис

Свойство border указывается используя одно или более значений , , и указанных ниже.

Значения

Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .

Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).

Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

Обычный синтаксис

border =
|| (en-US)
|| (en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

Примеры

HTML

div class="fun-border">Look at my borders.div> p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!p> style contenteditable> .fun-border  border: 2px solid red; > style>

CSS

style  display: block; border: 1px dashed black; >

Результат

Спецификация

border-width : как и у каждого из подсвойств этого свойства:
- border-top-width (en-US): medium
- border-right-width (en-US): medium
- border-bottom-width (en-US): medium
- border-left-width (en-US): medium
- border-top-style (en-US): none
- border-right-style (en-US): none
- border-bottom-style (en-US): none
- border-left-style (en-US): none
- border-top-color (en-US): currentcolor
- border-right-color (en-US): currentcolor
- border-bottom-color (en-US): currentcolor
- border-left-color (en-US): currentcolor
- border-width : как и у каждого из подсвойств этого свойства:
  - border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
  - border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
  - border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
  - border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
  - border-bottom-style (en-US): как указано
  - border-left-style (en-US): как указано
  - border-right-style (en-US): как указано
  - border-top-style (en-US): как указано
  - border-bottom-color (en-US): вычисленный цвет
  - border-left-color (en-US): вычисленный цвет
  - border-right-color (en-US): вычисленный цвет
  - border-top-color (en-US): вычисленный цвет
  - border-color (en-US): как и у каждого из подсвойств этого свойства:
    - border-bottom-color (en-US): цвет
    - border-left-color (en-US): цвет
    - border-right-color (en-US): цвет
    - border-top-color (en-US): цвет
    - border-bottom-width (en-US): длина
    - border-left-width (en-US): длина
    - border-right-width (en-US): длина
    - border-top-width (en-US): длина
    Совместимость браузеров
    
    BCD tables only load in the browser
    
    Также смотрите
    
    Found a content problem with this page?
    
    This page was last modified on 11 февр. 2023 г. by MDN contributors.
    
    Your blueprint for a better internet.
    
    Источник
    
    border-style
    
    The border-style shorthand CSS property sets the line style for all four sides of an element’s border.
    
    Try it
    
    Constituent properties
    
    This property is a shorthand for the following CSS properties:
    
    Syntax
```
/* Keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* top and bottom | left and right */ border-style: dotted solid; /* top | left and right | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: revert; border-style: revert-layer; border-style: unset; 
```
    The border-style property may be specified using one, two, three, or four values.
    - When one value is specified, it applies the same style to all four sides.
    - When two values are specified, the first style applies to the top and bottom, the second to the left and right.
    - When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
    - When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
    Each value is a keyword chosen from the list below.
    
    Values
    
    Describes the style of the border. It can have the following values:
    
    Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
    
    Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won’t be displayed.
    
    Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side’s border-width .
    
    Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
    
    Displays a single, straight, solid line.
    
    Displays two straight lines that add up to the pixel size defined by border-width .
    
    Displays a border with a carved appearance. It is the opposite of ridge .
    
    Displays a border with an extruded appearance. It is the opposite of groove .
    
    Displays a border that makes the element appear embedded. It is the opposite of outset . When applied to a table cell with border-collapse set to collapsed , this value behaves like ridge .
    
    Displays a border that makes the element appear embossed. It is the opposite of inset . When applied to a table cell with border-collapse set to collapsed , this value behaves like groove .
    
    Formal definition
    - border-top-style : none
    - border-right-style : none
    - border-bottom-style : none
    - border-left-style : none
    - border-bottom-style : as specified
    - border-left-style : as specified
    - border-right-style : as specified
    - border-top-style : as specified
    Formal syntax
    
    border-style =
    
    =
    none |
    hidden |
    dotted |
    dashed |
    solid |
    double |
    groove |
    ridge |
    inset |
    outset
    
    Examples
    
    All property values
    
    Here is an example of all the property values.
    
    HTML
```
pre class="b1">nonepre> pre class="b2">hiddenpre> pre class="b3">dottedpre> pre class="b4">dashedpre> pre class="b5">solidpre> pre class="b6">doublepre> pre class="b7">groovepre> pre class="b8">ridgepre> pre class="b9">insetpre> pre class="b10">outsetpre> 
```
    CSS
```
pre  height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; > /* border-style example classes */ .b1  border-style: none; > .b2  border-style: hidden; > .b3  border-style: dotted; > .b4  border-style: dashed; > .b5  border-style: solid; > .b6  border-style: double; > .b7  border-style: groove; > .b8  border-style: ridge; > .b9  border-style: inset; > .b10  border-style: outset; > 
```
    Result
    
    Specifications
    
    Browser compatibility
    
    BCD tables only load in the browser
    
    See also
    
    Found a content problem with this page?
    
    This page was last modified on Jun 30, 2023 by MDN contributors.
    
    Your blueprint for a better internet.
    
    MDN
    
    Support
    
    Our communities
    
    Developers
    
    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
    
    Источник

border-style

border-style

Синтаксис

Значения

Объектная модель

Браузеры

border

Синтаксис

Значения

Обычный синтаксис

Примеры

HTML

CSS

Результат

Спецификация

Совместимость браузеров

Также смотрите

Found a content problem with this page?

border-style

Try it

Constituent properties

Syntax

Values

Formal definition

Formal syntax

Examples

All property values

HTML

CSS

Result

Specifications

Browser compatibility

See also

Found a content problem with this page?

MDN

Support

Our communities

Developers