Содержание

border-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значения

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

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел3 пиксела5 пикселов7 пикселов

dotted

dotted

dotted

dotted

dashed

dashed

dashed

dashed

solid

solid

solid

solid

double

double

double

double

groove

groove

groove

groove

ridge

ridge

ridge

ridge

inset

inset

inset

inset

outset

outset

outset

outset

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

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

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-style</title>
  <style>
   p { 
    border-style: double; /* Стиль линии вокруг параграфа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body> 
</html>

Результат данного примера показан на рис. 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-style — стили рамок | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство border-style устанавливает стиль рамки для элемента. Можно использовать от 1 до 4 значений. Стиль устанавливается начиная с верхней позиции. Если задано два стиля подряд, это значит первое значение для верхней и нижней рамки, второе значение для правой и левой рамки.

  • border-style: dotted solid double dashed;
    • Верхняя рамка — точечная
    • Правая рамка — сплошная
    • Нижняя рамка — двойная
    • Левая рамка — пунктирная

  • border-style: dotted solid double;
    • Верхняя рамка — точечная
    • Правая и левая рамка — сплошные
    • Нижняя рамка — двойная

  • border-style: dotted solid;
    • Верхняя и нижняя рамка — точечные
    • Правая и левая рамка — сплошные

  • border-style: dotted;
    • Все четыре рамки — точечные

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.borderStyle=»dotted double»

Синтаксис

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;

Значения свойства

Значение Описание
none Указывает, что рамка отсутствует.
hidden Тоже самое что и значение «none».
dotted Точечная рамка.
dashed Пунктирная рамка.
solid Сплошная рамка.
double Двойная рамка.
groove Объемная рифленая вдавленная рамка.
ridge Объемная рифленая выпуклая рамка.
inset Объемная вдавленная рамка.
outset Объемная выпуклая рамка.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-width: 5px;
border-style: none;
}

CSS border style



Пример

Задайте стиль для границы:

div {border-style: dotted;}

Подробнее примеры ниже.

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

Свойство border-style задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.

Примеры:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

  • border-style: dotted;
    • all four borders are dotted
Значение по умолчанию:none
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object.style.borderStyle=»dotted double»

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
border-style1.04.0
1.0		1.03.5

Примечание: Значение «скрытый» не поддерживается в IE7 и более ранних версиях. IE8 требует! Doctype. IE9 и последующей поддержки «скрытые».

Синтаксис CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Значения свойств

ЗначениеОписание
noneЗначение по умолчанию. Не указывает границы
hiddenТак же, как «None», за исключением разрешения пограничного конфликта для элементов таблицы
dottedЗадает пунктирную границу
dashedЗадает пунктирную границу
solidЗадает сплошную границу
doubleЗадает двойную границу
grooveЗадание трехмерной границы с канавкой. Эффект зависит от значения цвета границы
ridgeЗадание трехмерной ребристой границы. Эффект зависит от значения цвета границы
insetЗадает 3D-вставку границы. Эффект зависит от значения цвета границы
outsetЗадание трехмерной границы начала. Эффект зависит от значения цвета границы
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Пунктирная граница:

div {border-style: dashed;}

Пример

Сплошная граница:

div {border-style: solid;}

Пример

Двойная граница:

div {border-style: double;}

Пример

Граница канавки:

div {
    border-style: groove;
    border-color: coral;
    border-width: 7px;
}

Пример

Граница хребта:

div {
    border-style: ridge;
    border-color: coral;
    border-width: 7px;
}

Пример

Граница вставки:

div {
    border-style: inset;
    border-color: coral;
    border-width: 7px;
}

Пример

Граница начала:

div {
    border-style: outset;
    border-color: coral;
    border-width: 7px;
}

Пример

Задайте различные границы для каждой стороны элемента:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}

Похожие страницы

CSS Справочник: CSS Border

HTML DOM Справочник: borderStyle Свойство


CSS-рамка

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

Оформление рамок HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
noneЗначение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hiddenЭквивалентно none.
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства
border-style:
{border-style: solid dotted none dotted;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-style: solid;}
p {border-top-style: solid;}

2. Цвет рамки border-color

Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparentУстанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цветЦвет рамок задается при помощи значений свойства color.
{border-color: #cacd58;}
{1,4}
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства
border-color:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

border-width
(border-top-width, border-right-width, border-bottom-width, border-left-width)
Значения:
thin / medium / thickКлючевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium
width (px, em)
{border-width: 5px;}
{1,4}
Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства
border-width:
{border-width: 5px 10px 15px 3px;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;
}

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

p {border-top: 2px solid grey;}

CSS — text-decoration-style — Свойство CSS text-decoration-style устанавливает стиль строк, заданных параметро

Свойство CSS text-decoration-style устанавливает стиль строк, заданных параметром text-decoration-line . Стиль применяется ко всем строкам, которые заданы с помощью text-decoration-line .

Если указанное оформление имеет конкретное семантическое значение, такое как прямая линия, означающая, что некоторый текст был удален, авторам рекомендуется обозначать это значение с помощью HTML-тега, например <del> или <s> . Так как в некоторых случаях браузеры могут отключить стилизацию, семантическое значение не исчезнет в такой ситуации.

При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .


Syntax

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;


text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Values

solid
Рисует одну линию.
double
Рисует двойную линию.
dotted
Рисует пунктирную линию.
dashed
Рисует пунктирную линию.
wavy
Рисует волнистую линию.
-moz-none Этот API не стандартизирован.
Не рисует линии. Используйте text-decoration-line : none .

Formal definition

Формальный синтаксис

solid | double | dotted | dashed | wavy

Examples

Установка волнистого подчеркивания

.example {
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}
CSS
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
HTML
<p>This text has a wavy red line beneath it.</p>
Results

Specifications

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
text-decoration-style

57

79

36

6-39

No

44

12.1

8

57

57

36

6-39

43

12.2

8

7.0

wavy

57

79

6

No

44

8

57

57

6

43

8

7.0

См.также

  • При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

CSS3 границы (css3 border) | Vavik96

Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.
CSS3 border позволяет изменять внешний вид элемента. CSS границы является одним из широко используемых свойств CSS. С помощью CSS3 можно указать стиль, цвет и ширину границы элемента.

Стиль CSS3 границы:

Стиль для каждой стороны CSS границы элемента, таких как -верхняя, нижняя или боковая, может быть задан в стиле индивидуально. В CSS3 доступны различные типы стилей границы все они перечислены ниже.

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • dot-dash
  • dot-dot-dash
  • wave
  • groove
  • ridge
  • inset
  • outset

Пример CSS3 стиля границы:

.borderStyle{
	border-style:dashed;
}

Примечание: нет никакого способа контролировать расстояние между точками и тире.

Цвет границы (Border-color):

Атрибут “border-color” устанавливает цвет границы. Это может быть либо шестнадцатеричное значение, либо RGBA, или названия цветов, как красный, зеленый, синий ..

Примечание: вы должны установить стиль границы перед использованием свойства цвета.

Пример настройки цвета границ:

.borderStyle{
	border-style:dotted;
	border-color:#CCC;
}

Ширина границы (Border-width):

Атрибут “Border-width” контролирует ширину границы, которая измеряется в пикселях.

Пример настройки ширины:

.borderStyle{
	border-style:dotted;
	border-color:#CCC;
	border-width:5px;
}

Пример объединённых стилей:

.borderStyle{
	border:dashed 7px #0099FF;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius:6px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	}

Радиус границы CSS3:

Закругленными CSS  углами пользуются в течение длительного времени. Теперь можно создавать закругленные углы без использования изображений в CSS3.

В этом уроке мы увидим, как создавать простые CSS3 закругленные углы или как управлять радиусом границы в CSS3. Прежде, чем идти в глубь свойств давайте посмотрим совместимость и простой радиус границы.

Таблица совместимости CSS3 радиуса:

Простой CSS3 Радиус границы:

Ниже простой пример использования радиус CSS3 границы.

.class {
border-radius: 20px;
}

Чтобы сделать совместимость с Firefox и WebKit браузерами необходимо добавить префикс.

.borderStyle{
border:dashed 6px #000000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}

CSS3 круг с использованием радиуса границы:

Мы можем легко сделать круг в CSS без изображений, только с использованием CSS3 радиуса границы.

.borderStyle{
border:dashed 4px #000000;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright:100px;
-moz-border-radius-bottomleft:100px;
-moz-border-radius-bottomright:100px;
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-webkit-border-bottom-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
}

Ниже код для совместимости с IE. IE9 будет использовать границы радиуса по умолчанию.

.borderStyle{
border-bottom-left-radius: 152px 152px;
border-bottom-right-radius: 228px 228px;
border-bottom-style: dashed;
border-bottom-width: 42px;
border-left-style: dashed;
border-left-width: 42px;
border-right-style: dashed;
border-right-width: 42px;
border-top-left-radius: 152px 152px;
border-top-right-radius: 304px 304px;
border-top-style: dashed;
border-top-width: 42px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}

Попробуй так же: css3 border radius generator.

 

 

Оригинал / Перевод

border-style — CSS: каскадные таблицы стилей

.

Сокращенное свойство CSS border-style задает стиль линии для всех четырех сторон границы элемента.

Это свойство является сокращением для следующих свойств CSS:

 
стиль границы: нет;
стиль границы: скрытый;
стиль границы: пунктирная;
стиль границы: пунктирная;
стиль границы: сплошной;
стиль границы: двойной;
бордюрный стиль: паз;
бордюрный стиль: гребень;
стиль границы: вставка;
стиль границы: начало;


стиль границы: сплошная пунктирная линия;


стиль границы: скрытый двойной пунктир;


стиль границы: без сплошной пунктирной пунктирной линии;


стиль границы: наследование;
стиль границы: начальный;
стиль границы: вернуться;
стиль границы: не задано;

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

  • Когда указано одно значение , он применяет тот же стиль к всем четырем сторонам .
  • Когда указаны два значения , первый стиль применяется к верхнему и нижнему , второй - к левому и правому .
  • Когда указаны три значения , первый стиль применяется к верхнему , второй к левому и правому , третий к нижнему .
  • Если указано , четыре значения , стили применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Каждое значение - это ключевое слово, выбранное из списка ниже.

Значения

Описывает стиль границы. Может иметь следующие значения:

нет
Как и ключевое слово hidden , границы не отображаются. Если не задано background-image , вычисленное значение border-width той же стороны будет 0 , даже если указанное значение является чем-то другим.В случае сворачивания ячейки таблицы и границы значение none имеет самый низкий приоритет : если установлена ​​какая-либо другая конфликтующая граница, она будет отображаться.
скрыто
Как и ключевое слово none , не отображает границы. Если не задано background-image , вычисленное значение border-width той же стороны будет 0 , даже если указанное значение является чем-то другим. В случае сворачивания ячейки таблицы и границы значение , скрытое значение имеет наивысший приоритет : если установлена ​​какая-либо другая конфликтующая граница, она не будет отображаться.
с точками
Отображает серию закругленных точек. Расстояние между точками не определяется спецификацией и зависит от реализации. Радиус точек равен половине вычисленного значения ширины границы той же стороны .
штриховая
Отображает серию коротких штрихов с квадратным концом или линейных сегментов. Точный размер и длина сегментов не определены в спецификации и зависят от реализации.
цельный
Отображает одну прямую сплошную линию.
двойной
Отображает две прямые линии, которые в сумме составляют размер пикселя, определенный параметром border-width .
паз
Отображает резную рамку. Это противоположность хребта .
гребень
Отображает рамку с выдавленным внешним видом.Это противоположность канавке .
вставка
Отображает границу, которая делает элемент встроенным. Это противоположность , начальная . При применении к ячейке таблицы с border-collapse , установленным на свернутым , это значение ведет себя как groove .
исход
Отображает границу, придающую элементу рельефный вид. Это противоположность , вставка .При применении к ячейке таблицы с border-collapse , установленным на collapsed , это значение ведет себя как ridge .
 <стиль строки> {1,4} 
, где 
  <стиль строки> = none | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | outset

Все значения свойств

Вот пример всех значений свойств.

HTML 
  
 нет 
 скрытый 
 пунктирный 
 пунктир 
 твердый 
 двойной 
 паз 
 гребень 
 вставка 
 начало
CSS 
  pre {
  высота: 80 пикселей;
  ширина: 120 пикселей;
  маржа: 20 пикселей;
  отступ: 20 пикселей;
  дисплей: встроенный блок;
  цвет фона: бледно-зеленый;
  ширина границы: 5 пикселей;
  размер коробки: рамка-рамка;
}


.b1 {
  стиль границы: нет;
}

.Би 2 {
  стиль границы: скрытый;
}

.b3 {
  стиль границы: пунктирная;
}

.b4 {
  стиль границы: пунктирная;
}

.b5 {
  стиль границы: сплошной;
}

.b6 {
  стиль границы: двойной;
}

.b7 {
  бордюрный стиль: паз;
}

.b8 {
  бордюрный стиль: гребень;
}

.b9 {
  стиль границы: вставка;
}

.b10 {
  стиль границы: начало;
}
Результат

таблицы BCD загружаются только в браузере

border-left-style - CSS: Cascading Style Sheets

Свойство CSS border-left-style устанавливает стиль линии левой границы элемента .

Примечание: Спецификация не определяет, как границы разных стилей соединяются в углах.

 
граница-левый-стиль: нет;
граница-левый-стиль: скрытый;
граница-левый-стиль: пунктирная;
граница-левый-стиль: пунктирная;
граница-левый-стиль: сплошной;
граница-левый-стиль: двойной;
граница-левый-стиль: канавка;
граница-левый-стиль: гребень;
граница-левый-стиль: вставка;
граница-левый-стиль: начало;


граница-левый стиль: наследование;
граница-левый-стиль: начальный;
граница-левый стиль: вернуться;
граница-левый-стиль: не задано;

Свойство border-left-style задано как одно ключевое слово, выбранное из тех, которые доступны для свойства border-style.

 <стиль строки> 
, где 
  <стиль строки> = none | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | outset

Настройка левой границы рамки

HTML 
  <таблица>
  
     нет 
     скрыто 
     с точками 
     пунктир 
  
  
     твердый 
     двойной 
     паз 
     гребень 
  
  
     вставка 
     начало
CSS 
 
Таблица {
  ширина границы: 2 пикселя;
  цвет фона: # 52E385;
}
tr, td {
  отступ: 3 пикселя;
}


.b1 {border-left-style: нет;}
.b2 {граница-левый-стиль: скрытый;}
.b3 {border-left-style: dotted;}
.b4 {border-left-style: пунктирная;}
.b5 {border-left-style: solid;}
.b6 {граница-левый-стиль: двойной;}
.b7 {border-left-style: groove;}
.b8 {border-left-style: ridge;}
.b9 {border-left-style: inset;}
.b10 {border-left-style: outset;}

Результат

таблицы BCD загружаются только в браузере

border-width - CSS: Cascading Style Sheets

Сокращенное свойство CSS border-width устанавливает ширину границы элемента.

Это свойство является сокращением для следующих свойств CSS:

 
ширина границы: тонкий;
ширина границы: средний;
ширина границы: толстая;

 ширина границы: 4 пикселя;
ширина границы: 1,2 бэр;


ширина границы: 2px 1.5em;


ширина границы: 1px 2em 1,5 см;


ширина границы: 1px 2em 0 4rem;


ширина границы: наследование;
ширина границы: начальная;
ширина границы: вернуться;
ширина границы: не задано;

Свойство border-width можно указать с использованием одного, двух, трех или четырех значений.

  • Когда указано одно значение , оно применяет одинаковую ширину к всем четырем сторонам .
  • Когда указаны два значения , первая ширина применяется к верхнему и нижнему , вторая - к левому и правому .
  • Когда указаны три значения , первая ширина применяется к верхнему , вторая к левому и правому , третья к нижнему .
  • Если указано , четыре значения , ширина применяется к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

Определяет ширину границы либо как явное неотрицательное значение , либо как ключевое слово. Если это ключевое слово, оно должно быть одним из следующих значений:

Примечание: Поскольку в спецификации не определена точная толщина, обозначаемая каждым ключевым словом, точный результат при использовании одного из них зависит от реализации. Тем не менее, они всегда следуют шаблону тонкий ≤ средний ≤ толстый , и значения постоянны в пределах одного документа.

Сочетание значений и длин

HTML 
  

    одно значение: граница шириной 6 пикселей со всех 4 сторон 



    два разных значения: верхняя и нижняя граница шириной 2 пикселя, правая и левая граница шириной 10 пикселей 



    три разных значения: 0,3 em сверху, 9 пикселей снизу и нулевая ширина справа и слева 



    четыре разных значения: «тонкий» вверху, «средний» справа, «толстый» внизу и 1em слева
CSS 
  #sval {
  граница: гребень #ccc;
  ширина границы: 6 пикселей;
}
#bival {
  граница: сплошной красный;
  ширина границы: 2px 10px;
}
#treval {
  граница: оранжевый пунктир;
  ширина границы: 0.3em 0 9px;
}
#fourval {
  граница: сплошной светло-зеленый;
  border-width: тонкий средний толстый 1em;
}
п {
  ширина: авто;
  маржа: 0,25em;
  заполнение: 0,25 мкм;
}
Результат

таблицы BCD загружаются только в браузере

border-bottom-style - CSS: Cascading Style Sheets

Свойство CSS border-bottom-style устанавливает стиль линии нижней границы элемента .

Примечание: Спецификация не определяет, как границы разных стилей соединяются в углах.

 
стиль нижней границы: нет;
стиль нижней границы: скрытый;
стиль нижней границы: пунктирная;
стиль нижней границы: пунктирная;
стиль нижнего края: сплошной;
стиль нижней границы: двойной;
стиль границы-дна: канавка;
стиль границы-дна: гребень;
стиль нижней границы: вставка;
граница-нижний-стиль: начало;


граница нижнего стиля: наследование;
стиль нижнего края: начальный;
граница нижнего стиля: вернуться;
граница-нижний-стиль: не задано;

Свойство border-bottom-style задано как одно ключевое слово, выбранное из тех, которые доступны для свойства border-style.

 <стиль строки> 
, где 
  <стиль строки> = none | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | outset

Демонстрация всех стилей границ

HTML 
  <таблица>
  
     нет 
     скрыто 
     с точками 
     пунктир 
  
  
     твердый 
     двойной 
     паз 
     гребень 
  
  
     вставка 
     начало
CSS 
 
Таблица {
  ширина границы: 3 пикселя;
  цвет фона: # 52E385;
}
tr, td {
  отступ: 3 пикселя;
}


.b1 {стиль нижнего края: нет;}
.b2 {стиль нижнего края: скрытый;}
.b3 {border-bottom-style: dotted;}
.b4 {border-bottom-style: dashed;}
.b5 {border-bottom-style: solid;}
.b6 {стиль нижнего края: двойной;}
.b7 {border-bottom-style: groove;}
.b8 {border-bottom-style: ridge;}
.b9 {стиль нижнего края: вставка;}
.b10 {border-bottom-style: outset;}
Результат

Таблицы BCD загружаются только в браузере

Свойство стиля границы CSS

Дополнительные примеры "Попробуйте сами" ниже.

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

Свойство border-style устанавливает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.

Примеры:

  • обрамление: сплошная пунктирная двойная штриховка;
    • верхняя граница пунктирная
    • правая граница сплошная
    • нижняя граница двойная
    • левая граница пунктирная

  • обрамление: сплошная двойная пунктирная линия;
    • верхняя граница пунктирная
    • правая и левая границы сплошные
    • нижняя граница двойная

  • обрамление: сплошная пунктирная линия;
    • верхняя и нижняя границы пунктирные
    • правая и левая границы сплошные

  • обрамление: пунктирная;
    • все четыре границы пунктирны
Значение по умолчанию: нет
Унаследовано: нет
Анимация: нет.Прочитать о animatable
Версия: CSS1
Синтаксис JavaScript: объект .style.borderStyle = "двойной пунктир" Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
с бордюром 1.0 4,0 1,0 1,0 3,5

Примечание: Значение «скрытый» не поддерживается в IE7 и более ранних версиях. IE8 требует! DOCTYPE. IE9 и более поздние версии поддерживают «скрытый».

Синтаксис CSS

стиль границы: нет | скрытый | пунктирный | пунктирный | сплошной | двойной | канавка | гребень | вставка | начало | начальный | наследование;

Значения свойств

Значение Описание Играй
нет Значение по умолчанию.Без рамки Играй »
скрыто То же, что «нет», за исключением пограничного конфликта разрешение элементов стола Играй »
пунктирная Определяет пунктирную границу Играй »
штриховые Определяет пунктирную границу Играй »
цельный Задает сплошную границу Играй »
двойной Задает двойную границу Играй »
паз Задает трехмерную рифленую границу.Эффект зависит от значение цвета границы Играй »
гребень Задает трехмерную ребристую границу. Эффект зависит от значение цвета границы Играй »
вставка Задает границу вставки 3D. Эффект зависит от значение цвета границы Играй »
исход Задает исходную трехмерную границу.Эффект зависит от значение цвета границы Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальная Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Граница паза:

div {
стиль границы: канавка;
цвет бордюра: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам "

Пример

Бордюр гребня:

div {
стиль границы: гребень;
цвет бордюра: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам "

Пример

Внутренний бордюр:

div {
стиль границы: вставка;
цвет бордюра: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам "

Пример

Начальная граница:

div {
стиль границы: начало;
цвет бордюра: коралловый;
ширина границы: 7 пикселей;
}

Попробуй сам "

Пример

Установить разные границы с каждой стороны элемента:

п.один {стиль границы: сплошной штриховой пунктир, двойной;}
п.два {стиль границы: сплошной пунктир пунктирный;}
п.три {стиль границы: сплошной пунктир;}
п.н. }

Попробуй сам "

связанные страницы

Учебное пособие по CSS: Граница CSS

Ссылка

HTML DOM: borderStyle свойство



CSS свойство border-top


Пример

Установить стиль верхней границы для различных элементов:

h2 {
border-top: сплошной красный цвет 5 пикселей;
}

h3 {
border-top: 4px синяя точка;
}

div {
border-top: двойной;
}

Попробуй сам "

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

Сокращенное свойство border-top устанавливает все свойства верхней границы в одном объявлении.

Свойства, которые можно установить, должны быть в следующем порядке:

Если параметр border-top-color опущен, применяемый цвет будет цветом текст.

Значение по умолчанию: средний нет цвет
Унаследовано: нет
Анимация: да, см. Отдельные свойства . Прочитать о animatable Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.borderTop = "синий пунктир, 3 пикселя" Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
кайма 1,0 4,0 1,0 1,0 3,5

Синтаксис CSS

верхняя граница: ширина границы стиль границы цвет границы | начальный | наследование;

Значения свойств

Значение Описание
ширина до края Обязательно.Задает ширину верхней границы. Значение по умолчанию "средний"
с бордюром Обязательно. Задает стиль верхней границы. Значение по умолчанию - «нет»
цвет верхней границы Необязательно. Задает цвет верхней границы. Значение по умолчанию - цвет текста
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальная
унаследовать Наследует это свойство от своего родительского элемента.Читать про наследство

связанные страницы

Учебное пособие по CSS: Граница CSS

Ссылка на HTML DOM: borderTop недвижимость



CSS Границы

Свойства границы CSS позволяют указать стиль, ширина и цвет границы элемента.

У меня бордюры со всех сторон.


У меня красная нижняя граница.



У меня синяя левая рамка.

Стиль границы CSS

Свойство стиля границы определяет, какой тип границы отображать.

Допускаются следующие значения:

  • пунктирная - определяет пунктирную границу
  • пунктирная - определяет пунктирную границу
  • solid - определяет сплошную границу
  • double - определяет двойную границу
  • канавка - Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы
    • .
  • гребень - Определяет трехмерную гребенчатую границу.Эффект зависит от значения цвета границы
    • .
  • вставка - Определяет границу вставки 3D. Эффект зависит от значения цвета границы
    • .
  • outset - Определяет исходную трехмерную границу. Эффект зависит от значения цвета границы
    • .
  • нет - не определяет границы
  • скрытый - Определяет скрытую границу

Свойство в стиле границы может иметь от одного до четырех значений (для верхняя граница, правая граница, нижняя граница и левая граница).

Пример

Демонстрация различных стилей границ:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
стр. канавка {border-style: groove;}
стр. гребень {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Пунктирная граница.

Пунктирная граница.

Сплошная граница.

Двойная рамка.

Граница канавки. Эффект зависит от значения цвета границы.

Бордюр хребта. Эффект зависит от значения цвета границы.

Внутренняя рамка. Эффект зависит от значения цвета границы.

Начальная граница. Эффект зависит от значения цвета границы.

Без границы.

Скрытая граница.

Смешанная граница.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *