Border css3: border-width — CSS | MDN

border-width — CSS | MDN

CSS-свойство border-width определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства border.

Общий синтаксис: 
<line-width>{ (en-US)1,4} (en-US)
где 
<line-width> = <length> | (en-US) thin | (en-US) medium | (en-US) thick
border-width: ширина                  /* Одно значение */
border-width: вертикальная горизонтальная    /* Два значения */
border-width: верх горизонтальная основание    /* Три значения */
border-width: верх право основание лево  /* Четыре значения */

border-width: inherit /* Родительское значение */
Values
<br-width>
Is either a non-negative explicit <length> value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
thin
A thin border
medium
A medium border
thick
A thick border
 The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
inherit
Is a keyword indicating that all four values are inherited from their parent’s element calculated value.
A mix of values and lengths
HTML
<p>
    one value: 6px wide border on all 4 sides</p>
<p>
    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p>
    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p>
    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
CSS
#sval {
    border: ridge #ccc;
    border-width: 6px;
}
#bival {
    border: solid red;
    border-width: 2px 10px;
}
#treval {
    border: dotted orange;
    border-width: 0.3em 0 9px;
}
#fourval {
    border: solid lightgreen;
    border-width: thin medium thick 1em;
}
p {
    width: auto;
    margin: 0.25em;
    padding: 0.25em;
}
Result
BCD tables only load in the browser
border-bottom — CSS | MDN
Сокращённое свойство  CSS border-bottom описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width (en-US), border-bottom-style (en-US) и border-bottom-color (en-US).
Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что …
border-bottom-style: dotted;
border-bottom: thick green;
… это то же самое, что …
border-bottom-style: dotted;
border-bottom: none thick green;
… и значение border-bottom-style (en-US), указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style (en-US) является none, то без указания border-style граница не будет показана.
This property is a shorthand for the following CSS properties:
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
Values
<line-width> || (en-US) <line-style> || (en-US) <color>
где 
<line-width> = <length> | (en-US) thin | (en-US) medium | (en-US) thick
<line-style> = none | (en-US) hidden | (en-US) dotted | (en-US) dashed | (en-US) solid | (en-US) double | (en-US) groove | (en-US) ridge | (en-US) inset | (en-US) outset
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
Applying a bottom border
HTML
<div>
  This box has a border on the bottom side.
</div>
CSS
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
Results
BCD tables only load in the browser
border-image-slice — CSS | MDN
CSS-свойство border-image-slice  делит изображение указанное в border-image-source на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.
Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.
The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).
The border-image-repeat, border-image-width, border-image-outset properties define how these images will be used.
The shorthand CSS property border-image (en-US) may reset this property to its default value.

border-image-slice: 30%;


border-image-slice: 10% 30%;


border-image-slice: 30 30% 45;


border-image-slice: 7 12 14 5;



border-image-slice: 10% fill 7 12;


border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
Значения
slice
Is a <number> or a <percentage> of the offset for the four slicing lines. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
horizontal
Is a <number> or a <percentage> of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
vertical
Is a <number> or a <percentage> of the offset for the two vertical slicing lines, the right and the left ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
top
Is a <number> or a <percentage> of the offset for the top slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
bottom
Is a <number> or a <percentage> of the offset for the bottom slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
right
Is a <number> or a <percentage> of the offset for the right slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
left
Is a <number> or a <percentage> of the offset for the left slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
fill
Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
inherit
Is a keyword indicating that all four values are inherited from their parent’s element calculated value.
Формальный синтаксис
BCD tables only load in the browser
border-bottom | htmlbook.ru
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
6.0+
8.0+
1.0+
3.5+
1.0+
1.0+
1.0+
1.0+
Краткая информация 
Версии CSS
Описание
 Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу
 элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер
 сам определит, какое из них соответствует нужному свойству.
Синтаксис
 border-bottom: [border-width || border-style || border-color] | inherit
Значения
 Значение border-width определяет толщину границы.
 Для управления ее видом  предоставляется  несколько значений свойства border-style.
 Их названия и результат действия представлен на рис. 1.
 Рис.1. Стили рамок
border-color устанавливает цвет границы, значение
 может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom</title>
  <style>
   .panel {
    background: #ccc; /* Цвет фона */
   } 
   .panel P.content {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    border-top: 2px dotted white; /* Параметры линии вверху */
   }
   .panel P.title {
    font-family: sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    background: maroon; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom: 2px solid white; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body> 
  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
     aliguam erat volutpat.</p>
  </div>
 </body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства border-bottom
Объектная модель
 [window.]document.getElementById(«elementID»).style.borderBottom
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех  границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.
Internet Explorer до версии 7.0 включительно не  поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться  при использовании значений groove, ridge, inset или outset.
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;}
HTML и CSS с примерами кода
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Фон
Синтаксис
/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
Значение по-умолчанию: Зависит от использования
Применяется к: Ко всем элементам
Спецификации
Описание и примеры
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border</title>
    <style>
      .brd {
        border: 4px double black; /* Параметры границы */
        background: #fc3; /* Цвет фона */
        padding: 10px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <div>
      Познание текста, не учитывая количества слогов,
      стоящих между ударениями, дает ямб. Эти слова
      совершенно справедливы, однако генеративная поэтика
      аннигилирует урбанистический скрытый смысл.
    </div>
  </body>
</html>
В данном примере вокруг блока добавляется двойная граница.
Свойство border | CSS справочник
CSS свойства
Определение и применение
CSS свойство border позволяет установить все свойства границ в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.
Свойства, которые можно установить:
ширина границы — border-width (medium | thin | thick | length | initial | inherit).
стиль границы — border-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
цвет границы — border-color (color | transparent | initial | inherit).
Поддержка браузерами
CSS синтаксис:
border:"border-width border-style border-color | initial | inherit";
JavaScript синтаксис:
object.style.border="2px solid orange"
Значения свойства
Значение
Описание
border-width
Задает ширину границы. По умолчанию — «medium».
border-style
Задает стиль границы. По умолчанию — «none».
border-color
Задает цвет границы. По умолчанию — цвет элемента.
initial
Устанавливает свойство в значение по умолчанию.
inherit
Указывает, что значение наследуется от родительского элемента.
Версия CSS
CSS1
Наследуется
Нет.
Анимируемое
Да.
Пример использования
<!DOCTYPE html>
<html>
<head>
<title> Свойство background-repeat</title>
<style> 
.primer {
border :4px solid orange; /* задаём сплошную границу шириной 4px оранжевого цвета */
background-color:khaki; /* задаём цвет заднего фона */
}
.primer2 {
border:2px dotted red; /* задаём пунктирную границу шириной 2px красного цвета */
}
</style>
</head>
	<body>
		<div class = "primer">Пример использования свойства border.</div>
		<div class = "primer2">Пример использования свойства border.</div>
	</body>
</html>
Пример использования свойства border.CSS свойства
 border-style — CSS: Каскадные таблицы стилей 
 Сокращенное свойство CSS   border-style   задает стиль линии для всех четырех сторон границы элемента.
 Это свойство является сокращением для следующих свойств CSS:
 
стиль границы: нет;
стиль границы: скрытый;
стиль границы: пунктирная;
стиль границы: пунктирная;
стиль границы: сплошной;
стиль границы: двойной;
бордюрный стиль: паз;
бордюрный стиль: гребень;
стиль границы: вставка;
стиль границы: начало;


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


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


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


стиль границы: наследование;
стиль границы: начальный;
стиль границы: вернуться;
стиль границы: не задано;
  
 Свойство  стиля границы  может быть указано с использованием одного, двух, трех или четырех значений.
 Когда  указано одно значение , он применяет тот же стиль к  всем четырем сторонам .
 Когда  указаны два значения , первый стиль применяется к  верхнему и нижнему , второй - к  левому и правому .
 Когда указаны  три значения , первый стиль применяется к  верхнему , второй к  левому и правому , третий к  нижнему .
 Если указано , четыре значения , стили применяются к  верхнему ,  правому ,  нижнему  и  левому  в указанном порядке (по часовой стрелке).
 Каждое значение - это ключевое слово, выбранное из списка ниже.
 Значения 
   
 Описывает стиль границы. Может иметь следующие значения:
  нет 
 Подобно ключевому слову  hidden , границы не отображаются. Если не установлено  background-image , вычисленное значение  border-width той же стороны  будет  0 , даже если указанное значение является чем-то другим.В случае сворачивания ячейки таблицы и границы значение  none  имеет самый низкий приоритет  : если установлена ​​какая-либо другая конфликтующая граница, она будет отображаться.
  скрыто 
 Как и ключевое слово  none , не отображает границы. Если не установлено  background-image , вычисленное значение  border-width той же стороны  будет  0 , даже если указанное значение является чем-то другим.В случае сворачивания ячейки таблицы и границы значение  hidden  имеет наивысший приоритет  : если установлена ​​какая-либо другая конфликтующая граница, она не будет отображаться.
  с точками 
 Отображает серию закругленных точек. Расстояние между точками не определяется спецификацией и зависит от реализации. Радиус точек равен половине вычисленного значения ширины границы  той же стороны .
  штриховая 
 Отображает серию коротких штрихов с квадратным концом или линейных сегментов.Точный размер и длина сегментов не определены в спецификации и зависят от реализации.
  цельный 
 Отображает одну прямую сплошную линию.
  двойной 
 Отображает две прямые линии, которые в сумме составляют размер пикселя, определенный параметром  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-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-color - CSS: Cascading Style Sheets 
 Это свойство является сокращением для следующих свойств CSS:
 
цвет границы: красный;


цвет границы: красный # f015ca;


цвет границы: красный rgb (240,30,50, 0,7) зеленый;


цвет границы: красный желтый зеленый синий;


цвет границы: наследовать;
цвет границы: начальный;
цвет границы: вернуться;
цвет границы: не задано;
  
 Свойство  border-color  может быть указано с использованием одного, двух, трех или четырех значений.
 Когда  указано одно значение , он применяет один и тот же цвет к  всем четырем сторонам .
 Когда  указаны два значения , первый цвет применяется к  верхнему и нижнему , второй - к  левому и правому .
 Когда указаны  три значения , первый цвет применяется к  верхнему , второй к  левому и правому , третий к  нижнему .
 Когда указаны  четыре значения , цвета применяются к  верхнему ,  правому ,  нижнему  и  левому  в указанном порядке (по часовой стрелке).
 Значения 
  <цвет> 
 Определяет цвет границы.
 <цвет> {1,4} 
, где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 
, где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |   
 
 Полное использование цвета рамки 
 HTML 
  

  
  border-color: red;  эквивалентен 
  
 
  border-top-color: красный;  
    
  border-right-color: красный;  
    
  border-bottom-color: красный;  
    
  border-left-color: красный;  
  


  
  border-color: золотисто-красный;  эквивалентно 
  
 
  border-top-color: gold;  
    
  border-right-color: красный;  
    
  border-bottom-color: gold;  
    
  border-left-color: красный;  
  


  
  border-color: красный голубой золотой;  эквивалентен 
  
 
  border-top-color: красный;  
    
  border-right-color: cyan;  
    
  border-bottom-color: gold;  
    
  border-left-color: голубой;  
  


  
  border-color: красный, голубой, черный, золотой;  эквивалентен 
  
 
  border-top-color: красный;  
    
  border-right-color: голубой;  
    
  border-bottom-color: черный;  
    
  border-left-color: gold;  
  

  
 CSS 
  #justone {
  цвет границы: красный;
}

#horzvert {
  цвет границы: золотисто-красный;
}

#topvertbott {
  цвет границы: красно-голубой золотой;
}

#trbl {
  цвет границы: красный голубой черный золотой;
}


div {
  граница: сплошная 0.3em;
  ширина: авто;
  маржа: 0,5em;
  заполнение: 0.5em;
}

ul {
  маржа: 0;
  стиль списка: нет;
}
  
 Результат 
 Таблицы BCD загружаются только в браузере
 Свойства CSS, связанные с цветом границы:  border ,  border-top-color ,  border-right-color ,  border-bottom-color ,  граница-левый-цвет ,
 Другие свойства CSS, связанные с границами:  border-width ,  border-style 
 Тип данных  <цвет> 
 Другие свойства, связанные с цветом:  цвет ,  цвет фона ,  цвет контура ,  цвет текста-украшения ,  цвет выделения текста ,  тень текста ,  цвет каретки  и  column-rule-color 
 Применение цвета к элементам HTML с помощью CSS
 border-bottom - CSS: Каскадные таблицы стилей 
 Сокращенное свойство CSS   border-bottom   устанавливает нижнюю границу элемента.Он устанавливает значения  border-bottom-width ,  border-bottom-style  и  border-bottom-color .
 Как и все сокращенные свойства,  border-bottom  всегда устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Он устанавливает для тех, которые не указаны, их значения по умолчанию. Это означает, что ...
  border-bottom-style: пунктирная;
нижняя граница: густо-зеленый;
  
 ... на самом деле то же самое, что...
  border-bottom-style: пунктирная;
нижняя граница: без густого зеленого цвета;
  
 ... и значение  border-bottom-style , данное до  border-bottom , игнорируется. Поскольку значение по умолчанию  border-bottom-style  равно  none , отсутствие указания части  border-style  приводит к отсутствию границы.
 Это свойство является сокращением для следующих свойств CSS:
  нижняя граница: 1px;
нижняя граница: 2 пикселя с точками;
нижняя граница: синяя пунктирная линия;


нижняя граница: наследование;
нижняя граница: начальная;
граница снизу: вернуться;
нижняя граница: не задано;
  
 Три значения сокращенного свойства могут быть указаны в любом порядке, и одно или два из них могут быть опущены.
 Значения 
  || <стиль-линия> || <цвет> 
, где 
  <ширина-линии> = <длина> | тонкий | средний | толстый 
 <стиль-линия> = нет | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | outset 
 <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 
, где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |   
 
 Применение нижней границы 
 HTML 
  

  Это поле имеет границу с нижней стороны.
  
 CSS 
  div {
  border-bottom: синий пунктир 4px;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  font-weight: жирный;
  выравнивание текста: центр;
}
  
 Результаты 
 Таблицы BCD загружаются только в браузере
 CSS Borders | Учебник CSS 
 Граница  Свойство  является сокращением для всех свойств границы. Он определяет цвет, ширину и стиль для всех четырех сторон границы элемента.
  Синтаксис: 
  border: border-width border-style цвет границы  
 Выше упоминался наиболее часто используемый формат свойств  border  для добавления границ к вашим HTML-элементам. Как мы сделали с этим абзацем.
  Пример: 
  # red-border {
    граница: сплошной красный 1px;
}  
 Но границу можно реализовать и с помощью свойств индивидуально. Давайте узнаем об этих трех свойствах границы и о том, как их использовать.
 Стиль границы 
 Стиль границы 
 Это свойство используется для установки границы вокруг элемента. Поддерживаются несколько стилей границ, например:
 штриховые
 с точками
 двойной
 паз
 скрыто
 вставка
 нет
 начальный
 гребень
 цельный
 Это  пунктирная  граница
 Это  пунктирная  граница
 Это  паз  бордюр
  Пример: 
  # dashed-border {
    стиль границы: пунктирная;
}
# dotted-border {
    стиль границы: пунктирная;
}
# groove-border {
    бордюрный стиль: паз;
}  
 Живой пример →
 Ширина границы 
 Ширина границы 
 Это свойство задает ширину границы в числовых значениях или именованных значениях:  тонкое ,  среднее  или  толстое .Ширину границы также можно настроить с помощью независимого свойства  border-width 
 Это  толстая пунктирная граница 
  Пример 
  # dashed-border {
    обрамление:  пунктирная ;
    ширина границы:  6 пикселей ;
}  
 Живой пример →
 Цвет рамки 
 Цвет рамки: 
 Это свойство устанавливает цвет границы с использованием значения цвета. Значение цвета может быть шестнадцатеричным кодом, значением RGB или допустимым названием цвета.
 Это красная пунктирная рамка  толщиной 
  Пример 
  # dashed-border {
    стиль границы: пунктирная;
    ширина границы: 6 пикселей;
    цвет границы: красный;
}  
 Живой пример →
 Мы также можем предоставить 4 разных цвета в одном правиле  border-color , чтобы установить разные цвета для всех 4 сторон границы.
 Это  толстая пунктирная красочная рамка 
  Пример 
  # dashed-border {
    стиль границы: пунктирная;
    ширина границы: 6 пикселей;
    цвет границы: красный синий зеленый желтый;
}  
 Живой пример →
 4 разных значения цвета для верхнего, правого, нижнего и левого в одном порядке.Если вы укажете 2 разных названия цвета, то первый цвет будет установлен для верхней и нижней границы, а второй цвет будет установлен для левого и правого. Давай, попробуй!
 Это совместимо с  CSS1 ,  CSS2  и  CSS3  вместе со следующими веб-браузерами,
 IE 4+
 Firefox 1+
 Opera 3.5+
 Safari 1+
 Хром 1+
 граница-развал 
 Это свойство определяет, связаны ли ячейки таблицы или разделены.
  Синтаксис: 
  граница-коллапс: коллапс | отдельный | унаследовать  
 Значение по умолчанию -  отдельных , каждая ячейка имеет границу с некоторым интервалом. Если установлено значение  collapse , будет только одна граница для всего элемента.
 Это свойство в основном используется для стилизации 
.
 межосевое расстояние 
 Это свойство определяет интервал между ячейками в таблице.Опять же, это свойство также используется с таблицами в HTML.
  Синтаксис: 
  border-spacing: неотрицательная длина | унаследовать  
 Если указана одна длина, она дает как горизонтальный, так и вертикальный интервал. Если явно определены два значения, первое значение дает  горизонтальный интервал , а второе значение дает  вертикальный интервал .
 Установка границы с одной стороны 
 Как мы узнали выше, мы можем легко установить границу вокруг элемента с помощью свойства  border-style , изменить толщину границы с помощью свойства  border-width  и задать цвет с помощью свойства  border-color  .
 Теперь мы также можем использовать эти три свойства для установки границы с любой стороны. Все, что нам нужно сделать, это добавить имя стороны между:
 Например: чтобы добавить границу только внизу, используйте свойства  border-bottom-style ,  border-bottom-width ,  border-bottom-color 
 У меня пунктирная рамка внизу
  Пример 
  # dashed-border {
    стиль нижней границы: пунктирная;
    ширина нижней границы: 4 пикселя;
    цвет нижней границы: синий;
}  
 Живой пример →
 и то же можно сокращенно записать следующим образом:
  нижняя граница: синяя пунктирная 4 пикселя  
 Подобно  border-bottom , свойства границы могут быть установлены индивидуально для верхнего, правого и левого края.Для установки верхней границы вы можете использовать
 бордюр-верх (стенография)
 ширина по верху границы
 с бордюром
 цвет верхней границы
 Для установки правой границы можно использовать
 граница правая (стенографическая)
 ширина рамки справа
 граница-правая
 цвет границы справа
 Для установки левой границы можно использовать
 граница слева (стенография)
 ширина границы слева
 с рамкой слева
 цвет рамки слева
 Уф! Это много свойств.Но практика делает мужчину идеальным. Далее идут таблицы! Удачи!
 28 Примеры CSS-границ 
 Коллекция отобранных вручную бесплатных  примеров кода HTML и CSS-границ . Обновление коллекции за февраль 2020 года. 9 новинок.
 CSS Границы Анимации
 Автор 
 Луи Хёбрегс
  25 августа 2020 
 О коде 
 Использовать SVG для изображения границы 
 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Ананья Неоги
  3 августа 2020 
 О коде 
 Градиенты градиента CSS 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Иван Богачев
  31 марта 2020 
 О коде 
 Границы и градиенты 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 Автор 
 Джад Лимкако
  29 марта 2020 
 О коде 
 Множественные значения радиуса границы 
 Вы, наверное, знали, что вы можете установить  border-radius  элемента на 4 значения, и, используя сокращение, он идет по часовой стрелке сверху, справа, снизу, слева.Но знаете ли вы, что на самом деле можно установить до 8 значений, если разделить их? Каждый угол может иметь 2 значения, как вы можете видеть в этом примере.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Брайан Хаферкамп
  5 марта 2020 
 О коде 
 CSS Candy Stripe Border с использованием Clip-Path 
 Создайте отзывчивую границу в виде полосок конфет, используя свойство  clip-path  для каждого из элементов списка в  ul .Очень легко изменить высоту, цвет фона и цвет полос.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Смещение и кадр XOR: живой 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Тудор Сфэтосу
  31 января 2020 
 О коде 
 Полноэкранная винтажная рамка с несколькими границами 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: bootstrap.css
 Автор 
 Ана Тудор
  27 декабря, 2019 
 О коде 
 Круглые бордюры на чистом CSS 
 Образцы границ создаются с помощью  clip-path  на псевдоэлементе.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 Автор 
 ShopTalk Show
  12 декабря 2019 
 О коде 
 Простое изображение с рамкой по размеру 
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Граница в стиле карты 
 Эффект границы на основе карты с использованием наложенной границы   и  теней .Единый HTML-элемент с CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Размытая граница 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Саид Алипур
  2 февраля 2019 
 О коде 
 Волшебные границы 
 Постарайтесь создать динамическую и гибкую таблицу с границами только между ячейками.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Тобиас Райх
  31 января 2019 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript (Babel)
 О коде 
 Интерактивная рамка для кнопок 
 Кнопка с интерактивным градиентом границы  .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Стефан Юдис
  18 января 2019 
 О коде 
 Градиентная граница 
 Граница градиента HTML и CSS   без псевдоэлементов.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 О коде 
 Закругленная сторона 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Тони Фиппс
  17 января 2019 
 О коде 
 Анимированная граница при наведении курсора 
 Карточка с  анимацией  левая граница  при наведении курсора .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Абдель Рман
  16 января 2019 
 О коде 
 CSS Quote Box Эффекты наведения курсора 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: font-awesome.css
 Автор 
 Илья Стрельцын
  19 декабря 2018 
 О коде 
 SVG как изображение границы для углов произвольной формы с тенью 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 Автор 
 Энди Белл
  26 октября 2018 
 О коде 
 Эскизная рамка 
 Использование 8  значений border-radius  может быть довольно крутым.В этом примере показано, как его использование в элементе и его псевдоэлементе  :: before  может создать схематичный внешний вид.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Парк Джорджа У.
  7 мая 2018 
 О коде 
 Градиенты градиентного контура CSS 
 В этом примере показано, как свойство CSS  clip-path  можно использовать для создания границ градиента различной формы.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Парк Джорджа У.
  9 апреля 2018 г. 
 О коде 
 CSS градиентные закругленные границы 
 В этом примере показано, как  градиентов CSS  можно применить к  закругленной границе .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Дэвид Дарнс
  19 февраля 2018 
 О коде 
 Бордюрная вставка 
 Попытка добиться эффекта границы вставки   вокруг блока текста.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 О коде 
 Необычный бордюрный ящик 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 Тиффани Рэйсайд
  11 февраля 2015 
 О коде 
 Эффекты рисованной границы 
 Однострочная техника  border-radius .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 О коде 
 Неровная граница 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 О коде 
 8-битные границы с использованием теней 
  8-битные границы  с использованием нескольких теней CSS3 и немного Sass.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Автор 
 майкл пикер
  20 января 2014 г. 
 О коде 
 Граница в стиле комиксов 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 О коде 
 Гранично-радиусное переплетение 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: -
 Как создавать и стилизовать границы в CSS 
 Границы - важный элемент в веб-дизайне.Их можно использовать для разделения или привлечения внимания к контенту на веб-странице, чтобы людям было легче понять ваш сайт и предпринять действия на нем.
 Например, студия аудиовизуального контента Ende использует эффект рамки и тени, чтобы выделить кнопку CTA, побуждая посетителей посмотреть их ролик.
 Чтобы вы могли эффективно использовать этот элемент в дизайне своего веб-сайта, мы рассмотрим все, что вам нужно знать о свойствах границы CSS, в том числе:
 Стиль границы CSS 
 Свойство CSS-стиля границы определяет, какой тип границы отображать.Есть десять возможных значений, которые вы можете использовать для установки свойства стиля границы. Давайте взглянем на них ниже.
  Нет : не указывает границы
  Сплошная : задает сплошную границу
  Пунктирная : указывает пунктирную границу
  Пунктирная : указывает пунктирную границу
  Двойная : задает двойную границу
  Канавка : задает трехмерную рифленую границу
  Ridge : задает трехмерную ребристую границу
  Вставка : задает границу вставки 3D, которая заставляет элемент выглядеть встроенным
  Outset : задает исходную трехмерную границу, при которой элемент выглядит тисненым.
  Скрытый : указывает скрытую границу
 Эффект значений канавки, гребня, вставки и начала зависит от значения, установленного для свойства border-color.Если значение border-color не задано, по умолчанию используется черный цвет.
 Свойство стиля границы может иметь от одного до четырех значений. Если определено только одно значение, оно применяется ко всем сторонам элемента. Если определены два значения, то первое значение представляет верхнюю и нижнюю границы, а второе - правую и левую границы. Если определены три значения, первое значение представляет верхнюю границу, второе - левую и правую, а четвертое - нижнюю границу.Если определены четыре значения, они представляют верхнее, правое, нижнее и левое соответственно.
 Давайте посмотрим на примеры всех этих значений ниже.
 См. Pen zYZyMmx Кристины Перриконе (@hubspot) на CodePen.
 Ширина границы CSS 
 Свойство CSS border-width определяет ширину границы. Вы можете установить это свойство, используя значения ключевых слов или значения длины. Давайте взглянем на них ниже.
  Значения ключевых слов:  тонкие, средние, толстые
  Значения длины:  пикселей, pt, em, rem, vh и др.
 Как и свойство border-style, свойство border-width может иметь от одного до четырех значений.Если определено только одно значение, оно применяется ко всем сторонам элемента. Если определены два значения, то первое значение представляет ширину верхней и нижней границы, а второе - ширину правой и левой границы. Если определены три значения, первое значение представляет ширину верхней границы, второе - левую и правую, а четвертое - нижнюю ширину. Если определены четыре значения, они представляют верхнее, правое, нижнее и левое соответственно.
 Давайте посмотрим на примеры, определяемые разными значениями ширины границы ниже.
 См. Ширину границы CSS для пера Кристины Перриконе (@hubspot) на CodePen.
 Цвет границы CSS 
 Свойство CSS border-color определяет цвет границы. Вы можете установить это свойство, используя названия цветов, шестнадцатеричные цветовые коды, значения RGB или RGBA и значения HSL или HSLA.
 Как и свойства border-style и border-width, свойство border-color может иметь от одного до четырех значений. Если определено только одно значение, оно применяется ко всем сторонам элемента.Если определены два значения, то первое значение представляет цвета верхней и нижней границы, а второе - цвета правой и левой границы. Если определены три значения, первое значение представляет цвет верхней границы, второе - левый и правый, а четвертое - нижний цвет. Если определены четыре значения, они представляют верхнее, правое, нижнее и левое соответственно.
 Давайте посмотрим на примеры, определяемые разными значениями цвета границы ниже.
 См. Цвет границы CSS для пера Кристины Перриконе (@hubspot) на CodePen.
 Сокращение границ CSS 
 Сокращение CSS - это группа свойств CSS, которые позволяют одновременно устанавливать значения нескольких свойств. Эти значения разделены пробелами.
 Свойство границы, например, является сокращением для отдельных свойств границы выше: ширина границы, стиль границы и цвет границы.
 Итак, я мог написать от руки следующие объявления:
  
 ширина границы: 5 пикселей; 
 стиль границы: сплошной; 
 цвет границы: # 00A4BD; 
  
 Или в одном объявлении с использованием сокращенного свойства border:
  
 граница: сплошная 5px # 00A4BD; 
  
 Хотя это сокращенное свойство может сэкономить ваше время и сделать ваш код более чистым, оно дает место для ошибок.Давайте рассмотрим типичную проблему, с которой вы можете столкнуться при использовании этого сокращенного свойства.
 Граница CSS не отображается 
 Если вы установили свойство сокращенной границы в CSS и граница не отображается, наиболее вероятная проблема заключается в том, что вы не определили стиль границы. Хотя значения свойств border-width и border-color можно опустить, свойство border-style должно быть определено. В противном случае он не будет отображаться.
 Если значения свойств border-width и border-color опущены, линия границы будет отображаться как черная и шириной около 3 пикселей по умолчанию.
 Вот пример границы, которая отображается, потому что она закодирована правильно, и границы, которая не отображается, потому что она закодирована неправильно.
 См. Не отображаемую границу CSS для пера Кристины Перриконе (@hubspot) на CodePen.
 Отступы границы CSS 
 Свойство заполнения CSS создает пространство между содержимым элемента и границей элемента. Если свойство padding не определено, то между его содержимым и границей нет пробела.
 Чтобы добавить пространство, вы можете установить свойство padding, используя значения длины или процентов.Ценности должны быть положительными. Отрицательные значения не отображаются.
 Как и свойства выше, свойство padding может иметь от одного до четырех значений. Если определено только одно значение, оно применяется ко всем сторонам элемента. Если определены два значения, то первое значение представляет собой верхнее и нижнее заполнение, а второе - правое и левое заполнение. Если определены три значения, первое значение представляет верхнее заполнение, второе представляет левое и правое, а четвертое представляет нижнее заполнение.Если определены четыре значения, они представляют верхнее, правое, нижнее и левое соответственно.
 Давайте посмотрим на примеры, определяемые различными значениями заполнения ниже.
 См. Pen jOBXXRW Кристины Перриконе (@hubspot) на CodePen.
 CSS Граница Тень 
 Свойство CSS box-shadow можно использовать в сочетании со свойством border для создания эффекта тени. Есть два обязательных значения для установки свойства стиля границы: смещение по горизонтали и смещение по вертикали.Давайте определим их ниже:
  h-offset : это значение устанавливает горизонтальное смещение тени. Положительное значение устанавливает тень на правой стороне поля, отрицательное значение устанавливает тень на левой стороне.
  v-offset : это значение устанавливает вертикальное смещение тени. Положительное значение устанавливает тень под рамкой, отрицательное значение устанавливает тень выше.
 Есть четыре дополнительных значения, которые вы можете добавить после значений h- и v-offset, чтобы повлиять на тень блока.Давайте взглянем на них ниже.
  Размытие : Добавьте третье значение, чтобы добавить эффект размытия. Чем выше число, тем более размытой будет тень.
  Spread : Включите четвертое значение, чтобы определить распространение тени. Положительное значение увеличивает размер тени, отрицательное - уменьшает.
  Цвет : укажите название цвета, шестнадцатеричный код или другое значение цвета, чтобы определить цвет тени. Если значение цвета не указано, цвет тени - это цвет текста.
  Inset : Включите ключевое слово inset, чтобы задать тень внутри поля.
 Вы также можете определить несколько теней. Просто разделите набор обязательных и необязательных значений запятыми. Убедитесь, что вы увеличили значения смещения по горизонтали и вертикали каскадных теней, чтобы вы могли их действительно видеть.
 Давайте посмотрим на примеры, определяемые различными значениями границы тени ниже.
 См. Pen CSS Border Shadow Кристины Перриконе (@hubspot) на CodePen.
 Граница изображения CSS 
 Свойство CSS border-image позволяет установить изображение в качестве границы вместо линии границы.
 Свойство является сокращением для свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat. При использовании сокращенного свойства требуется определить только три. Это:
  border-image-source : указывает URL-адрес изображения или путь к файлу
  border-image-slice : указывает, как нарезать изображение
  border-image-repeat : указывает, следует ли растягивать, повторять или округлять изображение границы.
 Для визуализации границы изображения необходимо также определить свойство границы.
 Давайте посмотрим на примеры, определяемые различными значениями border-image ниже.
 См. Pen CSS Image Border от Кристины Перриконе (@hubspot) на CodePen.
 Градиент границы CSS 
 Вы также можете использовать свойство CSS border-image, чтобы установить градиент CSS в качестве границы. Чтобы создать градиент границы, установите свойство border-image на «linear-gradient» или «повторяющееся-linear-gradient». Затем в скобках добавьте столько цветовых точек, сколько хотите. Вы можете использовать любую комбинацию названий цветов HTML, шестнадцатеричных цветовых кодов, цветовых кодов RGB и значений цвета HSL.Затем добавьте значение, чтобы определить свойство border-image-slice.
 Для визуализации границы градиента необходимо также определить свойство границы.
 Давайте посмотрим на несколько примеров:
 См. Pen CSS Border Gradient от Кристины Перриконе (@hubspot) на CodePen.
  Вы ​​можете узнать больше о создании цветовых градиентов CSS в   Как добавить и изменить цвет фона в HTML  . 
 Закругленная граница в CSS 
 Свойство CSS border-radius можно использовать для скругления краев границы.Вы можете установить это свойство, используя значения длины. Чем выше значение, тем более округлые края.
 Как и свойства border-style, border-width, border-color и padding, свойство border-radius может иметь от одного до четырех значений. Если определено только одно значение, оно применяется ко всем сторонам элемента. Если определены два значения, то первое значение представляет верхний и нижний края границы, а второе представляет правый и левый края границы. Если определены три значения, первое значение представляет верхнюю границу границы, второе - левую и правую, а четвертое - нижнюю границу.Если определены четыре значения, они представляют верхнее, правое, нижнее и левое соответственно.
 Давайте посмотрим на примеры, определяемые разными значениями border-radius ниже.
 См. Закругленную границу пера в CSS от Кристины Перриконе (@hubspot) на CodePen.
  Чтобы узнать, как еще можно использовать это свойство в дизайне своего веб-сайта, ознакомьтесь с   Как нарисовать круг с помощью свойства радиуса границы CSS  . 
 Свернуть границу CSS 
 Если вы создаете таблицу в HTML и элемент таблицы, а также элементы строки и ячейки таблицы имеют определенную границу, тогда вы можете сохранить границы отдельно.Или вы можете свернуть их, используя свойство CSS border-collapse.
 Вот как будет выглядеть простой элемент таблицы со свойством border-collapse, установленным на «отделить». Обратите внимание, что, поскольку значение этого свойства по умолчанию является отдельным, вы можете не указывать его в своем CSS.
 Вот как выглядел бы этот пример, если бы для свойства border-collapse было установлено значение «collapse».
 См. Свертывание границы Pen CSS от Кристины Перриконе (@hubspot) на CodePen.
 Важно отметить, что если для свойства border-collapse установлено значение «collapse», то свойство border-radius не будет отображаться. Для использования свойства border-radius вам потребуется установить для свойства border-collapse значение «отдельно».
 Добавление границ вокруг элементов в дизайн вашего веб-сайта 
 Borders может помочь сделать контент более понятным и привлекательным на вашем веб-сайте. Самое приятное то, насколько легко создавать и стилизовать границы благодаря свойствам границы CSS.Имея базовые знания HTML и CSS, вы можете быстро и легко добавить этот элемент дизайна на свои веб-страницы.
 .
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт