border-width

CSS border-width Property

The border-width property sets the width of an element’s four borders. This property can have from one to four values.

• border-width: thin medium thick 10px;
  • top border is thin
  • right border is medium
  • bottom border is thick
  • left border is 10px
  • top border is thin
  • right and left borders are medium
  • bottom border is thick
  • top and bottom borders are thin
  • right and left borders are medium
  • all four borders are thin

  Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

  Default value:	medium
  Inherited:	no
  Animatable:	yes. Read about animatable Try it
  Version:	CSS1
  JavaScript syntax:	object.style.borderWidth=»1px 5px» Try it

  Browser Support

  The numbers in the table specify the first browser version that fully supports the property.

  CSS Syntax

  Property Values

  Value	Description	Demo
  medium	Specifies a medium border. This is default	Demo ❯
  thin	Specifies a thin border	Demo ❯
  thick	Specifies a thick border	Demo ❯
  length	Allows you to define the thickness of the border. Read about length units	Demo ❯
  initial	Sets this property to its default value. Read about initial
  inherit	Inherits this property from its parent element. Read about inherit

  More Examples

  Example

  Set the width of the borders to medium:

  Example

  Set the width of the borders to thick:

  Example

  Set the width of the borders to 1px:

  Example

  Set the width of the borders to 15px:

  Example

  Set the width of the top and bottom borders to 10px, and the width of the left and right borders to 1px:

  Источник

  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

  

  Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

  Основы

  border-width: thick; border-style: solid; border-color: black;

  

  Например у параметра border-width есть три параметра: thin, medium, thick:

  Если необходимо менять цвет границы при наведении на объект:

  Border-Radius

  

  border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

  Для каждого угла можно назначить свое закругление:

  border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

  

  В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
  Всю конструкцию можно сжать в одну строку:

  /* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

  

  Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

  Несколько границ

  Border-Style

  solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

  border: 20px groove #e3e3e3;

  border-color: #e3e3e3; border-width: 20px; border-style: groove;

  

  Outline

  

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

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

  .box < width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; >/* Create two boxes with the same width of the container */ .box:after, .box:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >.box:after < border: 5px solid red; outline: 5px solid yellow; >.box:before

  

  Возможно это не самое элегантное решение, однако оно работает

  Box-Shadow

  

  Изменение углов

  border-radius: 50px / 100px; /* horizontal radius, vertical radius */

  border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

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

  

  CSS фигуры

  Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

  

  А теперь оставляем только синий треугольник:

  

  Создание Speech Bubble

  

  Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

  

  Оставляем только четверть квадратика:

  

  Теперь перемещаем ниже и закрашиваем:

  .speech-bubble < /* … other styles */ border-radius: 10px; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ >

  

  Примеры применения:

  /* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION 
  Hi there
   */ .speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; >/* Position the Arrow */ .speech-bubble-top:after < border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; >.speech-bubble-right:after < border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; >.speech-bubble-bottom:after < border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; >.speech-bubble-left:after

  

  Вертикальное центрирование текста

  минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

  .speech-bubble < /* other styles */ display: table; >.speech-bubble p

  

  Еще один пример нестандартного использования границ:

  

  Итог

  Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.

  Источник

  Как создать рамку вокруг элемента. 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 .

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

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

  Источник