Border свойства: Все о свойстве border / Habr – CSS-свойство: border | CSS

Leave a Comment / Разное / By /

Содержание

Свойство border-style | CSS справочник

CSS свойства

Определение и применение

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

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

Значение «hidden» не поддерживается в IE7 и более ранних версиях, для IE8 требуется элемент !DOCTYPE.

CSS синтаксис:

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

JavaScript синтаксис:

object.style.borderStyle = "dotted"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

Для запоминания порядка расстановки стиля границ в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L -left). По такому же принципу задаются отступы и поля в свойствах padding и margin.

<!DOCTYPE html>
<html>
<head>
<title>Ширина границ.</title>
<style> 
.primer1 {
border:5px orange; /* задаём границу шириной 5px оранжевого цвета для всех сторон */
border-style : dotted solid dashed double; /* задаём стиль для границ Top-Right-Bottom-Left  */
text-align: center; /* задаём выравнивание текста по центру */
width: 170px; /* задаём ширину блока */
}
.primer2 {
border:5px orange; /* задаём границу шириной 5px оранжевого цвета для всех сторон */
border-style : dotted solid dashed; /* задаём стиль для границ Top-Right+Left-Bottom  */
text-align: center; /* задаём выравнивание текста по центру */
width: 170px; /* задаём ширину блока */
}

 
.primer3 {
border:5px orange; /* задаём границу шириной 5px оранжевого цвета для всех сторон */
border-style : dotted solid; /* задаём стиль для границ Top+Bottom-Right+Left  */
text-align: center; /* задаём выравнивание текста по центру */
width: 170px; /* задаём ширину блока */
}
.primer4 {
border:5px orange; /* задаём границу шириной 5px оранжевого цвета для всех сторон */
border-style : dotted; /* задаём точечную границу для всех сторон Top+Right+Bottom+Left */
text-align: center; /* задаём выравнивание текста по центру */
width: 170px; /* задаём ширину блока */
}
</style>
</head>
	<body>
		<p class = "primer1">border-style: dotted solid dashed double;</p>
		<p class = "primer2">border-style: dotted solid dashed;</p>
		<p

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

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

Например:

  • border-style: dotted solid double dashed;
    • верхняя сторона рамки состоит из точек (dotted)
    • правая сторона рамки сплошная линия (solid)
    • нижняя сторона рамки двойная сплошная линия (double)
    • левая сторона рамки состоит из черточек (dashed)
  • border-style: dotted solid double;
    • верхняя сторона рамки состоит из точек (dotted)
    • правая и левая стороны рамки сплошная линия (solid)
    • нижняя сторона рамки двойная сплошная линия (double)
  • border-style: dotted solid;
    • верхняя и нижняя стороны рамки состоят из точек (dotted)
    • правая и левая стороны рамки сплошная линия (solid)
  • border-style: dotted;
    • все четыре стороны рамки состоят из точек (dotted)

CSS синтаксис

border-style: значение{1,4};

Возможные значения

ЗначениеОписание
noneЗначение по умолчанию. Без рамки.
hiddenТо же, что и none, за исключением разрешения конфликтов с рамками в элементах таблиц.
dottedРамка состоит из точек.
dashedРамка состоит из черточек.
solidСплошная линия.
doubleДвойная сплошная линия.
groove3-D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color.
ridge3-D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства
border-color.
inset3-D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color.
outset3-D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color.
initialУстанавливает значение по умолчанию.
inheritЗначение наследуется от родительского элемента.

Пример

Устанавливаем стиль для четырех сторон рамки параграфа


p {
     border-style: solid;
}

Свойство border-right | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-right устанавливает все свойства правой границы в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.

Свойства, которые можно установить:

  • ширина правой границы — border-right-width (medium | thin | thick | length | initial | inherit).
  • стиль правой границы — border-right-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
  • цвет правой границы — border-right-color (color | transparent | initial | inherit).

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

CSS синтаксис:

border-right:"border-width border-style border-color | initial | inherit";

JavaScript синтаксис:

object.style.borderRight = "3px solid orange"

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

ЗначениеОписание
border-right-widthЗадает ширину правой границы. По умолчанию — «medium».
border-right-styleЗадает стиль правой границы. По умолчанию — «none».
border-right-colorЗадает цвет правой границы. По умолчанию — цвет элемента.
initialУстанавливает свойство в значение по умолчанию.
inherit		Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство border-right</title>
<style> 
.primer {
border :4px solid orange; /* задаём сплошную границу шириной 4px оранжевого цвета для всех сторон */
border-right :4px dotted red; /* задаём для правой границы пунктир шириной 4px красного цвета */
text-align:khaki; /* задаём выравнивание текста по центру */
}
</style>
</head>
	<body>
		<p class = "primer">Пример использования свойства border-bottom.</p>
	</body>
</html>
Пример использования свойства border-right.CSS свойства

Свойство border-left | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-left устанавливает все свойства левой границы в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.

Свойства, которые можно установить:

  • ширина левой границы — border-left-width (medium | thin | thick | length | initial | inherit).
  • стиль левой границы — border-left-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
  • цвет левой границы — border-left-color (color | transparent | initial | inherit).

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

CSS синтаксис:

border-left:"border-width border-style border-color | initial | inherit";

JavaScript синтаксис:

object.style.borderLeft = "3px solid orange"

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

ЗначениеОписание
border-left-widthЗадает ширину левой границы. По умолчанию — «medium».
border-left-styleЗадает стиль левой границы. По умолчанию — «none».
border-left-colorЗадает цвет левой границы. По умолчанию — цвет элемента.
initial		Устанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство border-left</title>
<style> 
.primer {
border :4px solid orange; /* задаём сплошную границу шириной 4px оранжевого цвета для всех сторон */
border-left :4px dotted red; /* задаём для левой границы пунктир шириной 4px красного цвета */
text-align:khaki; /* задаём выравнивание текста по центру */
}
</style>
</head>
	<body>
		<p class = "primer">Пример использования свойства border-bottom.</p>
	</body>
</html>
Пример использования свойства border-left.CSS свойства

Свойство border-image-repeat | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-image-repeat определяет, должна ли граница изображения быть повторена, масштабируема или растянута.

В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

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

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

CSS синтаксис:

border-image-repeat:"stretch | repeat | round | space | initial | inherit";
border-image-repeat: round stretch;

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

JavaScript синтаксис:

object.style.borderImageRepeat = "stretch"

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

ЗначениеОписание
stretchИзображение растягивает на всю область. Это значение по умолчанию.
repeatИзображение повторяется, чтобы заполнить всю область (пока не заполнит зазор между двумя границами). Если изображение не помещается после повторения на целое число раз, то изображение будет обрезано.
roundИзображение должно повторяться, пока не заполнит зазор между двумя границами. Если изображение не помещается после повторения на целое число раз, то изображение будет масштабировано, чтобы соответствовать.
spaceИзображение повторяется, чтобы заполнить всю область. Если изображение не помещается после повторения на целое число раз, дополнительное пустое пространство распределяется между всеми повторами (плитками).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства border-image-repeat</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 70px; /* устанавливаем ширину блока */
margin-right : 10px; /* устанавливаем величину отступа от правого края элемента */
padding : 30px; /* устанавливаем величину внутреннего отступа элемента */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
border-image-source : url(img-border.png); /* устанавливаем путь к изображению, которое будет использовано в качестве границы */
border-image-width : 30px; /* устанавливаем ширину границы-изображения для всех сторон */
border-image-slice : 30; /* указываем смещение для всех сторон */
}
.test   {border-image-repeat : stretch;}  /* изображение растягивает на всю область (это значение по умолчанию) */
.test2   {border-image-repeat : repeat;}  /* изображение повторяется, чтобы заполнить всю область (пока не заполнит зазор между двумя границами). Если изображение не помещается после повторения на целое число раз, то изображение будет обрезано. */
.test3   {border-image-repeat : round;}  /* изображение должно повторяться, пока не заполнит зазор между двумя границами. Если изображение не помещается после повторения на целое число раз, то изображение будет масштабировано, чтобы соответствовать. */
.test4   {border-image-repeat : space;}  /* изображение повторяется, чтобы заполнить всю область. Если изображение не помещается после повторения на целое число раз, дополнительное пустое пространство распределяется между всеми повторами (плитками). */
</style>
</head>
	<body>
		<p><b>Первоначальное изображение:</b></p>
		<img src = "img-border.png" alt = "ramka"><br>
		<div class = "test">stretch</div>
		<div class = "test2">repeat</div>
		<div class = "test3">round</div>
		<div class = "test4">space</div>
	</body>
</html&g

Свойство border-image-slice | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-image-slice определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source. В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

  • Это свойство задает смещение внутрь от верхней, правой, нижней и левой кромки изображения. Изображение всегда разделяется на девять секций: четыре угла (1,2,3,4), четыре края (5,6,7,8) и середину (9). «Средняя» часть (9) рассматривается как полностью прозрачная, если для нее не установлено значение fill.
  • Угловые куски разделённого изображения (1,2,3,4) будут размещены в углах элемента, к которому применяется свойство. Края разделённых изображений (5,6,7,8) будут помещены по краям элемента (по умолчанию будут растянуты — значение stretch свойства border-image-repeat.
  • Свойства border-image-repeat, border-image-width и border-image-outset определяют, как эти секции будут использованы.
  • Для свойства border-image-slice можно указать от одного до четырех значений (top, right, bottom и left). Порядок указания значений можно запомнить, традиционно используя слово TRouBLe. Если четвертый параметр опущен, он такой же, как второй. Если третий тоже опущен, он такой же, как первый. Если и второй опущен, он такой же, как первый.
  • На нижнем рисунке отражено как определяется расстояние для смещения на изображении, используемом в качестве изображения-границы, со следующими установленными значениями: 20% top (сверху), 10% right (справа), 20% bottom (снизу) и 10% left (слева).

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

CSS синтаксис:

border-image-slice:"number | % | fill | initial | inherit";

/* значение применяется ко всем сторонам */
border-image-slice: 3;

/* первое значение применяется к горизонтали(top и bottom), а второе к вертикали (right и left) */
border-image-slice: 10 15;

/* первое значение - top, второе применяется к вертикали (right и left), а третее к bottom */
border-image-slice: 5% 10% 15%;

/* по порядку: top right bottom left */
border-image-slice: 5 10 10% 15;

/* значение fill может быть указано в любом месте */
border-image-slice: 5 fill 10 10% 10;

JavaScript синтаксис:

object.style.borderImageSlice = "100%"

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

ЗначениеОписание
numberУказывается число для смещения, которое означает для растровых изображений — количество пикселей (обратите внимание, что px не указывается), а для векторных изображений координаты. Допускается указать от одного до четырех значений (top, right, bottom и left). Угловые куски разделённого изображения будут размещены в углах элемента, к которому применяется свойство. Края разделённых изображений будут помещены по краям элемента (по умолчанию будут растянуты — значение stretch свойства border-image-repeat. Отрицательные значения недопустимы. Значения больше, чем размер изображения интерпретируются как 100%.
%Проценты указаны относительно высоты или ширины используемого изображения. Значение по умолчанию 100%.
fillОпределяет отображать или нет центральную часть изображения. Ключевое слово fill используется совместно со значениями number и/или % .
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Использование свойства border-image-slice</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 170px; /* устанавливаем ширину блока */
height : 100px; /* устанавливаем высоту блока */
padding

Свойство border-image-source | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-image-source указывает путь (относительный или абсолютный) к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения.

В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

Если значение свойства установлено как «none» (по умолчанию), или изображение по каким-то причинам не отображается, то границы элемента будут стилизованы в соответствии со значениями определенными в свойстве border. Такой приём подойдет и для браузера IE 10 и младше, которые не работают со свойством border-image-source.

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

CSS синтаксис:

border-image-source:"none | image | initial | inherit";

/* Допускается использование градиентов CSS */
border-image-source: linear-gradient(to right, red , green);
border-image-source: radial-gradient(yellow 50%, green 65%, red 100%);

JavaScript синтаксис:

object.style.borderImageSource = "url(ramka.png)"

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

ЗначениеОписание
noneИзображение не будет использовано. Это значение по умолчанию.
imageУказывает путь (относительный или абсолютный) к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения и встроенных SVG .
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства border-image-source</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 140px; /* устанавливаем ширину блока */
height : 100px; /* устанавливаем высоту блока */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
margin-right : 50px; /* устанавливаем величину отступа от правого края элемента */
border-image-width : 30px;  /* устанавливаем ширину границы-изображения для всех сторон */
border-image-repeat : round; /* изображение масштабируется и повторяется пока не заполнит зазор между двумя границами  */
border-image-slice : 30; /* указываем смещение для всех сторон */
}
.test   {border-image-source : url(img-border.png);} /* устанавливаем путь к изображению, которое будет использовано в качестве границы-изображения */
.test2 {border-image-source : linear-gradient(to right, red , green);}  /* устанавливаем линейный градиент, который будет использован в качестве границы-изображения */
.test3 {border-image-source : radial-gradient(yellow 50%, green 65%, red 100%);}  /* устанавливаем радиальный градиент, который будет использован в качестве границы-изображения */
</style>
</head>
	<body>
		<p><b>Первоначальное изображение:</b></p>
		<img src = "img-border.png" alt = "ramka"><br>
		<div class = "test">url(img-border.png)</div>
		<div class = "test2">linear-gradient</div>
		<div class = "test3">radial-gradient</div>
	</body>
</html>

В этом примере с помощью свойства border-image-source в качестве границы изображения мы использовали как линейный, так и радиальный градиент, для первого элемента было использовано png изображение.

Кроме того, с использованием свойства border-image-slice задали смещение внутрь от верхней, правой, нижней и левой кромки изображения, свойством border-image-width установили ширину границы-изображения для всех сторон, а свойством border-image-repeat указали как изображение-граница масштабируется и повторяется.

Результ нашего примера:

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

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