Css border ширина – Border добавляет ширины элементу, как избежать? — Хабр Q&A

Содержание

border-width | 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

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

border-width: [значение | thin | medium | thick] {1,4} | inherit

Значения

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

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-width</title>
  <style>
   p { 
    border-style: double; /* Стиль рамки вокруг параграфа */
    border-width: 3px 7px 7px 4px; /* Толщина границы */
    padding: 7px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Результат данного примера показан на рис. 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 в разных браузерах может несколько различаться.

border-width | CSS | WebReference

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

Краткая информация

Значение по умолчаниюmedium
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

border-width: [<размер> | thin | medium | thick] {1,4}

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

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

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-width</title>
  <style>
   p { 
    border-style: double; /* Стиль рамки вокруг параграфа */
    border-width: 3px 7px 7px 4px; /* Толщина границы */
    padding: 7px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body> 
  <p>Кластерное вибрато представляет собой хроматический 
  алеаторически выстроенный бесконечный канон с 
  полизеркальной векторно-голосовой структурой.</p>
 </body>
</html>

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

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

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

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

Объект.style.borderWidth

Примечание

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

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

border-width — ширина рамки | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство border-width задает ширину рамки для элемента. Можно использовать от 1 до 4 значений. Ширина устанавливается начиная с верхней позиции. Если задано два значения ширины подряд, это значит первое значение для верхней и нижней границы, второе значение для правой и левой границы.

  • border-width:thin medium thick 10px;
    • Верхняя граница — тонкая
    • Правая граница — средняя
    • Нижняя граница — толстая
    • Левая граница — 10px

  • border-width:thin medium thick;
    • Верхняя граница — тонкая
    • Правая и левая границы — средние
    • Нижняя граница — толстая

  • border-width:thin medium;
    • Верхняя и нижняя границы — тонкие
    • Правая и левая границы — средние

  • border-width:thin;
    • Все четыре границы — тонкие
Значение по умолчанию: medium
Применяется: ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.borderWidth=»thin thick»

Синтаксис

border-width: medium|thin|thick|ширина|inherit;

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

Значение Описание
thin Тонкая граница рамки.
medium Средняя граница рамки.
thick Толстая граница рамки.
ширина Позволяет определить ширину рамки в единицах измерения, используемых в CSS.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-style: solid;
border-width: thin;
}

Свойство border-width | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-width устанавливает ширину для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.

Поддержка браузерами

CSS синтаксис:

border-width:"medium | thin | thick | length | initial | inherit";

JavaScript синтаксис:

object.style.borderWidth = "3px"

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

ЗначениеОписание
mediumЗадает границу средней ширины. Это значение по умолчанию.&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
thin Задает узкую ширину границы.
thickЗадает толстую ширину границы.
lengthПозволяет вам определить толщину границы (например — 7px).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Для запоминания порядка расстановки ширины границ в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L -left). По такому же принципу задаются отступы и поля в свойствах padding и margin.

<!DOCTYPE html>
<html>
<head>
<title>Ширина границ.</title>
<style> 
.primer1 {
border:solid orange; /* задаём сплошную границу оранжевого цвета для всех сторон */
border-width : thin medium thick 7px; /* задаём ширину для границ Top-Right-Bottom-Left  */
text-align: center; /* задаём выравнивание текста по центру */
width: 170px; /* задаём ширину блока */
}
.primer2
{ border:solid orange; /* задаём сплошную границу оранжевого цвета для всех сторон */ border-width : thin medium thick; /* задаём ширину для границ Top-Right+Left-Bottom */ text-align: center; /* задаём выравнивание текста по центру */ width: 170px; /* задаём ширину блока */ } .primer3 { border:solid orange; /* задаём сплошную границу оранжевого цвета для всех сторон */ border-width : thin medium; /* задаём ширину для границ Top+Bottom-Right+Left */ text-align: center; /* задаём выравнивание текста по центру */ width: 170px; /* задаём ширину блока */ } .primer4 { border:solid orange; /* задаём сплошную границу оранжевого цвета для всех сторон */ border-width : thin; /* задаём тонкую ширину границ для всех сторон Top+Right+Bottom+Left */ text-align: center; /* задаём выравнивание текста по центру */ width: 170px; /* задаём ширину блока */ } </style> </head> <body> <p class = "primer1">border-width: thin medium thick 7px;</p> <p class = "primer2">border-width: thin medium thick;</p> <p class = "primer3">border-width: thin medium;</p> <p class = "primer4">border-width: thin;</p> </body> </html>
Пример указания ширины границ.CSS свойства

Свойство border-bottom-width | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-bottom-width устанавливает ширину нижней границы. Необходимо всегда объявлять стиль границы, прежде чем вы задаёте их ширину.

Поддержка браузерами

CSS синтаксис:

border-bottom-width:"medium | thin | thick | length | initial | inherit";

JavaScript синтаксис:

object.style.borderBottomWidth = "3px"

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

ЗначениеОписание
mediumЗадает границу средней ширины. Это значение по умолчанию.&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
thinЗадает узкую ширину границы.
thickЗадает толстую ширину границы.
lengthПозволяет вам определить толщину границы (например — 7px).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Ширина границ.</title>
<style> 
.primer {
border:solid; /* задаём сплошную границу для всех сторон */
border-bottom-width : thin; /* задаём для нижней границы тонкую ширину */
border-left-width : medium; /* задаём для левой границы среднюю ширину (по умолчанию) */
border-right-width : thick; /* задаём для правой границы толстую ширину */
border-top-width : 15px; /* задаём для верхней границы ширину 15px */
border-color : red green blue yellow; /* задаём цвета для границ T-R-B-L (для запоминания - TRouBLe) */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
</style>
</head>
	<body>
		<p class = "primer">Пример указания ширины границ</p>
	</body>
</html>
Пример указания ширины границ.CSS свойства

border-top-width | CSS | WebReference

Устанавливает толщину границы сверху элемента.

Краткая информация

Значение по умолчаниюmedium
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

border-top-width: <размер> | thin | medium | thick

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-width</title>
  <style>
   h2 {
    border-top-color: green; /* Цвет линии сверху */
    border-top-style: double; /* Стиль линии сверху */
    border-top-width: 7px; /* Толщина линии сверху */
    border-right-color: green; /* Цвет линии справа */
    border-right-style: double; /* Стиль линии */
    border-right-width: 5px; /* Толщина линии */
    padding: 7px; /* Поля вокруг текста */
    color: #f9b61c; /* Цвет текста */
   }
  </style>
 </head>
 <body> 
  <h2>Нечётный хамбакер</h2>
  <p>Гипнотический рифф mezzo forte просветляет целотоновый хамбакер.</p>
 </body>
</html>

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

Применение свойства border-top-width

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

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

Объект.style.borderTopWidth

Примечание

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

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Свойство border-right-width | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-right-width устанавливает ширину правой границы. Необходимо всегда объявлять стиль границы, прежде чем вы задаёте их ширину.

Поддержка браузерами

CSS синтаксис:

border-right-width:"medium | thin | thick | length | initial | inherit";

JavaScript синтаксис:

object.style.borderRightWidth = "3px"

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

ЗначениеОписание
mediumЗадает границу средней ширины. Это значение по умолчанию.&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
thinЗадает узкую ширину границы.
thickЗадает толстую ширину границы.
lengthПозволяет вам определить толщину границы (например — 7px).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Ширина границ.</title>
<style> 
.primer {
border:solid; /* задаём сплошную границу для всех сторон */
border-bottom-width : thin; /* задаём для нижней границы тонкую ширину */
border-left-width : medium; /* задаём для левой границы среднюю ширину (по умолчанию) */
border-right-width : thick; /* задаём для правой границы толстую ширину */
border-top-width : 15px; /* задаём для верхней границы ширину 15px */
border-color : red green blue yellow; /* задаём цвета для границ T-R-B-L (для запоминания - TRouBLe) */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
</style>
</head>
	<body>
		<p class = "primer">Пример указания ширины границ</p>
	</body>
</html>
Пример указания ширины границ.CSS свойства

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *