skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

Руководство по свойству border в CSS

CSS-свойство border позволяет вам определять стиль границы элемента.

Границы появляются между полем (margin) и отступом (padding) элемента. Граница может быть предопределена стилями, например сплошной, пунктирной, двойной линией и т. д., или изображением.

В этом разделе мы поговорим о том, как установить стиль, цвет и ширину границы.

Различные стили border

Свойство border-style устанавливает стиль границы блока, например: solid, dottedи т. д. Это более короткое свойство для стилизации границ всех четырех сторон элемента.

Свойство border-style может принимать следующие значения: none, hidden, solid, dashed, dotted, double, inset, outset, groove, и ridge. Теперь давайте взглянем на следующую иллюстрацию: она дает вам представление о различиях между типами стилей границ.

Значения none и hidden не отображают границы, однако между этими двумя значениями есть небольшая разница. В случае коллапса (collapse, преобразования соседних границ в одну) ячейки таблицы и границы значение none имеет самый низкий приоритет, тогда как hidden имеет самый высокий приоритет, если установлено любое другое конфликтующее свойство.

Значения inset, outset, groove и ridge создают 3D-подобный эффект, который существенно зависит от значения цвета границы. Обычно это достигается созданием «тени» из двух цветов, которые немного светлее и темнее, чем цвет границы. Давайте посмотрим на пример:

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}

Вы должны указать border-style для того, чтобы граница появилась вокруг элемента, потому что стиль границы по умолчанию — none. Ширина или толщина границы по умолчанию — medium, а цвет границы по умолчанию такой же, как и color текста.

Свойство border-width

Свойство border-width определяет ширину границы. Это короткое свойство для одновременной установки толщины всех четырех сторон элемента.

Посмотрим следующий пример, чтобы понять, как это работает:

p {
    border-style: dashed;
    border-width: 10px;
}

Ширина границы может быть указана с использованием любого значения длины, например, px, em, rem и т. д. Ширина границы также может быть указана с использованием одного из трех ключевых слов: thin, medium, и thick. Значения в процентах не допускаются.

Свойство border-color

Свойство border-color определяет цвет (color) границы. Это также короткое свойство для установки цвета всех четырех сторон элемента.

Следующие правила добавляют сплошную границу красного цвета вокруг абзацев.

p {
    border-style: solid;
    border-color: #ff0000;
}

CSS-свойство border-width или border-color не будут работать, если используются раздельно. Используйте свойство border-style, чтобы сначала установить стиль границы.

Сокращенное свойство border

CSS-свойство border является кратким свойством для установки одного или нескольких отдельных свойств border-width, border-style и border-color в одном правиле.

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

p {
    border: 5px solid #00ff00;
}

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

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

В приведенном ниже примере граница будет сплошной красной линией шириной 5 пикселей:

p {
    color: red;
    border: 5px solid;
}

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

p {
    border: 5px #00ff00;
}
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее