freeCodeCamp/guide/russian/css/borders/index.md

title	localeTitle
Border Property	Свойство Border

Свойство Border

CSS Border

Наш любимый CSS-атрибут позволяет полностью настраивать границы, которые появляются вокруг элементов HTML. С HTML было невозможно разместить границу вокруг элемента, за исключением таблицы. CSS Borders позволяет создавать четкие, настраиваемые стили границ с очень небольшой работой по сравнению с устаревшими методами HTML.

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

  border: 1px solid #000;

Свойства должны быть заданы в порядке:

1. border-style
2. border-width
3. border-color
4. border-radius

Не важно если одно из свойств будет пропущено, пример:

  border: solid red;

Этот код также будет верным.

Border Styles

Свойтсво border-style задает различные стили границы.

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

• dotted - граница из точек.
• dashed - граница из штрихов.
• solid - сплошная граница.
• double - двойная граница.
• groove - объемная рифленая граница.
• ridge - объемная ребристая граница.
• inset - объемная вдавленная границы.
• outset - объемная выдавленная граница.
• none - отсутствие границы.
• hidden - скрытая граница.

На основе выбранного вами свойства эти стили могут быть несовместимы. Вы можете назначать каждый стиль отдельно:

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

Или назначать несколько стилей одновременно:

  border-style: solid dashed double dotted;

Как видно свойство border позволяет выбрать различные части границы. [top, bottom, left, right]

Толщина границы

Чтобы изменить толщину границы, используйте атрибут border-width. Вы можете использовать ключевые термины или точные значения для определения ширины границы. Примечание: Вы должны определить border-style для отображения границы. Ширина может быть задана как определенный размер (in px, pt, cm, em, etc) или используя одно из трех предопределенных значений: thin, medium, или thick.

Пример:

<style type="text/css">
table {
	border-width: 7px;
	border-style: outset;
}
td {
	border-width: medium;
	border-style: outset;
}
p {
	border-width: thick;
	border-style: solid;
}
</style>

Цвет границы

Теперь переходим к творческму аспекту CSS Borders! С помощью атрибута border-color вы сможете создавать настраиваемые границы, чтобы соответствовать потоку и расположению вашего веб-сайта. Цвета границ могут быть любого цвета, определенного в системе RGB, шестнадцатеричным или ключевыми терминами. Ниже приведен пример каждого из этих типов.

Пример:

<style type="text/css">
table {
	border-color: rgb( 100, 100, 255);
	border-style: dashed;
}

td {
	border-color: #FFBD32;
	border-style: ridge;
}

p {
	border-color: blue;
	border-style: solid;
}
</style>

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

Свойство border-radius позволяет сделать углы границы закругленными. Это возможно благодаря указанию размера на сколько граница должна быть закруглена. размер может быть задан в px или %.

  border-radius: 25px;

С помощью свойства border-radius может быть задано скругление для каждого угла. Порядок: верх, низ, лево, право.

  border-radius: 15% 10px 30% 5px;

Border: Все в одном

Хотя хорошо, что CSS позволяет веб-разработчику быть очень специфичным в создании настраиваемой границы, иногда просто легче и меньше головной боли создавать единую границу, указывая все в одной строке кода CSS.

Пример:

<style type="text/css">
p { border: 20px outset blue; } 
h4 { border: 5px solid; } 
h5 { border: dotted; }
</style>

Дополнительная информация:

• MDN Documentation
• CSS3 Border Radius

Другие атрибуты границы

• 'border-radius' - это может установить радиус границы.
• 'border-spacing' - это может установить интервал между текстом и границей.
• 'border-image' - устанавливает изображение как границу.

Поддержка браузера: IE6 +