border-width

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* 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: revert; border: revert-layer; border: unset; 

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

• Outlines never take up space, as they are drawn outside of an element’s content.
• According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

• border-width : as each of the properties of the shorthand:
  • border-top-width : medium
  • border-right-width : medium
  • border-bottom-width : medium
  • border-left-width : medium
  • border-top-style : none
  • border-right-style : none
  • border-bottom-style : none
  • border-left-style : none
  • border-top-color : currentcolor
  • border-right-color : currentcolor
  • border-bottom-color : currentcolor
  • border-left-color : currentcolor
  • border-width : as each of the properties of the shorthand:
    • border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
    • border-left-width : the absolute length or 0 if border-left-style is none or hidden
    • border-right-width : the absolute length or 0 if border-right-style is none or hidden
    • border-top-width : the absolute length or 0 if border-top-style is none or hidden
    • border-bottom-style : as specified
    • border-left-style : as specified
    • border-right-style : as specified
    • border-top-style : as specified
    • border-bottom-color : computed color
    • border-left-color : computed color
    • border-right-color : computed color
    • border-top-color : computed color
    • border-color : as each of the properties of the shorthand:
      • border-bottom-color : a color
      • border-left-color : a color
      • border-right-color : a color
      • border-top-color : a color
      • border-bottom-width : a length
      • border-left-width : a length
      • border-right-width : a length
      • border-top-width : a length

      Formal syntax

      border =
      ||
      ||

      =
      |
      thin |
      medium |
      thick

      =
      none |
      hidden |
      dotted |
      dashed |
      solid |
      double |
      groove |
      ridge |
      inset |
      outset

      Examples

      Setting a pink outset border

      HTML

      div>I have a border, an outline, and a box shadow! Amazing, isn't it?div> 

      CSS

      div  border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; > 

      Result

      Specifications

      Browser compatibility

      BCD tables only load in the browser

      See also

      Found a content problem with this page?

      This page was last modified on Jul 18, 2023 by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      border-width

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

      Синтаксис

      border-width: [значение | thin | medium | thick] | inherit

      Значения

      Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

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

      Табл. 1. Зависимость результата от числа значений

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

      HTML5 CSS2.1 IE Cr Op Sa Fx

             
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
        

      Результат данного примера показан на рис. 1.

      

      Рис. 1. Применение свойства border-width

      Объектная модель

      [window.]document.getElementById(» elementID «).style.borderWidth

      Браузеры

      Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

      Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

      Толщина границы при использовании ключевых слов thin , medium и thick в разных браузерах может несколько различаться.

      Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

      CSS по категориям

      

      Поля

      

      Анимация

      

      Градиент

      

      Скруглённые уголки

      

      Изображения

      

      Псевдоэлементы

      

      Псевдоклассы

      

      Печать

      

      Контент

      

      Интерфейс

      

      Таблица

      

      Отступы

      

      Список

      

      Текст

      

      Шрифт

      

      Форматирование

      

      Размеры

      

      Позиционирование

      

      Границы

      

      Цвет и фон

      Селекторы

      • Селекторы тегов
      • Идентификаторы
      • Классы
      • Мультиклассы
      • Универсальный селектор
      • Вложенные селекторы
      • Дочерние селекторы
      • Соседние селекторы
      • Родственные селекторы
      • [атрибут*=»значение»]
      • [атрибут~=»значение»]
      • [атрибут|=»значение»]
      • Селекторы атрибутов
      • [атрибут=»значение»]
      • [атрибут^=»значение»]
      • [атрибут$=»значение»]

      Источник

      border-width

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

      • border-top-width (en-US): medium
      • border-right-width (en-US): medium
      • border-bottom-width (en-US): medium
      • border-left-width (en-US): medium
      • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
      • border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
      • border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
      • border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
      • border-bottom-width (en-US): длина
      • border-left-width (en-US): длина
      • border-right-width (en-US): длина
      • border-top-width (en-US): длина

      Синтаксис

      border-width =
      (en-US)

      =
      | (en-US)
      thin | (en-US)
      medium | (en-US)
      thick

      border-width: ширина /* Одно значение */ border-width: вертикальная горизонтальная /* Два значения */ border-width: верх горизонтальная основание /* Три значения */ border-width: верх право основание лево /* Четыре значения */ border-width: inherit /* Родительское значение */ 

      Values

      Examples

      A mix of values and lengths

      HTML

      p id="sval"> one value: 6px wide border on all 4 sidesp> p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left borderp> p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and leftp> p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em rightp> 

      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

      Specifications

      Specification	Status	Comment
      CSS Backgrounds and Borders Module Level 3 Определение ‘border-width’ в этой спецификации.	Кандидат в рекомендации	No direct change, the CSS data type extension has an effect on this property.
      CSS Level 2 (Revision 1) Определение ‘border-width’ в этой спецификации.	Рекомендация	Added the constraint that values’ meaning must be constant inside a document.
      CSS Level 1 Определение ‘border-width’ в этой спецификации.	Рекомендация

      Browser compatibility

      BCD tables only load in the browser

      See also

      Found a content problem with this page?

      This page was last modified on 7 нояб. 2022 г. by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      Как создать рамку вокруг элемента. CSS-свойство border

      CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

      В общем виде свойство записывается так:

      border-width — задаёт толщину границы.

      border-style — устанавливает стиль рамки.

      border-color — определяет цвет рамки.

      

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

      Border-width

      Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

      • thin — тонкая граница, обычно около одного пикселя.
      • medium — средняя граница, около трёх пикселей.
      • thick — толстая граница, примерно пять пикселей.

      Border-style

      border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

      hidden — граница скрыта, но она занимает место.

      solid — сплошная линия границы.

      groove — объёмная рифлёная вдавленная рамка.

      ridge — объёмная рифлёная выпуклая рамка.

      inset — объёмная вдавленная рамка.

      outset — объёмная выпуклая рамка.

      Border-color

      border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

      Наследование

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

      ⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

      Для чего использовать свойство border

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

      Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

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

      Нюансы

      Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

      

      Для создания рамок с закруглёнными углами используют свойство border-radius .

      

      Чем заменить свойство

      Для создания более сложных границ или декоративных элементов можно использовать свойства box-shadow , outline или border-image .

      Материалы по теме

      «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

      Источник