CSS border-style Property
The border-style property sets the style of an element’s four borders. This property can have from one to four values.
- border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
- top border is dotted
- right and left borders are solid
- bottom border is double
- top and bottom borders are dotted
- right and left borders are solid
- all four borders are dotted
Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.borderStyle=»dotted double» Try it Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value Description Demo none Default value. Specifies no border Demo ❯ hidden The same as «none», except in border conflict resolution for table elements Demo ❯ dotted Specifies a dotted border Demo ❯ dashed Specifies a dashed border Demo ❯ solid Specifies a solid border Demo ❯ double Specifies a double border Demo ❯ groove Specifies a 3D grooved border. The effect depends on the border-color value Demo ❯ ridge Specifies a 3D ridged border. The effect depends on the border-color value Demo ❯ inset Specifies a 3D inset border. The effect depends on the border-color value Demo ❯ outset Specifies a 3D outset border. The effect depends on the border-color value Demo ❯ initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit More Examples
Example
Example
Example
Example
Example
Example
Example
Example
Set different borders on each side of an element:
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
border-style
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
Значения
Для управления видом границы предоставляется несколько значений свойства 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 .
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element’s border.
I have borders on all sides.
I have a red bottom border.
I have a blue left border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
- dotted — Defines a dotted border
- dashed — Defines a dashed border
- solid — Defines a solid border
- double — Defines a double border
- 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
- none — Defines no border
- hidden — Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
Demonstration of the different border styles:
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!
