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

Leave a Comment / Css / By /

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 Указывает, что значение наследуется от родительского элемента.

Пример

border-width:

thin

medium

thick

1px

7px

11px

1px 5px 10px 20px

10px 2px

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

html — Как сделать border-bottom на всю ширину, но контент на max-width: 1200px?

Задать вопрос

Вопрос задан

Изменён 3 года 7 месяцев назад

Просмотрен 2k раз

Хочу сделать чтобы border-bottom был на всю ширину экрана, а контент был только в заданной ширине.

На картинке изобразил наглядно (желтые линии это border-bottom, красные — ширина блока с контентом)

Мой код:

body {
	width: 100%;
	margin: 0 auto;
	background: #ffffff;
	font-size: 16px;
}

.case {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

header {
	border-bottom: 1px solid #000000;
	height: 50px;
	display: flex;
	align-items: center;
}
<div>
		<header>
			<div>
				Logo
			</div>
		</header>
</div>
  • html
  • css

Поместите секции в контейнер, у секции ширина сколько вам нужно, у контейнера 100%

body, html {
  margin: 0;

}

.container {
  border-bottom: 1px solid #333;
}

section {
  width: 500px;
  margin: auto;
  height: 250px;
  background: #ddd;
}
<div>
  <section></section>
</div>
<div>
  <section></section>
</div>
<div>
  <section></section>
</div>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Ширина границы — попутный ветер CSS

Основное использование

Все стороны

Использовать границу , граница-0 , граница-2 , граница-4 0 0 утилиты установить ширину границы для всех сторон элемента.

граница

граница-2

граница-4

граница-8

 

<дел>
<дел>
<дел>  <дел>
<дел>
<дел>
<дел>

​Отдельные стороны

Используйте border-{side} , border-{side}-0 , border-{side}-2 , border-{side}-4 , или border-{side}-8 утилит для установки ширины границы для одной стороны элемента.

граница-t-4

граница-r-4

граница-b-4

граница-l-4

 

<дел>
<дел>

​Горизонтальная и вертикальная стороны

Используйте утилиты border-{x|y}-{width}

для одновременной установки ширины границы с двух сторон элемента.

граница-x-4

граница-y-4

​Между элементами

Вы также можете добавить границы между дочерними элементами, используя утилиты разделите-{x/y}-{ширина} и разделите-{цвет} .

01

02

03

 <дел>
  <дел>01
  <дел>02
  
03

  <дел>
  <дел>01
  <дел>02
  
03

Дополнительные сведения см. в документации по разделению по ширине и разделению по цвету.

​Использование без предварительной проверки

Если вы отключили предварительную проверку в своем проекте, вам нужно будет включать утилиту стиля границы каждый раз, когда вы используете одну из утилит border-width , чтобы граница фактически вступила в силу:

  <дел>
<дел>

Это связано с тем, что браузеры устанавливают border-style большинства элементов на none по умолчанию, поэтому добавления border-width самого по себе недостаточно для отображения границы.

Предпечатная проверка применяет глобальный сброс границ, который устанавливает border-style в solid и border-width в 0 , что позволяет добавить границу к элементу, используя только border-width Утилита в проектах, использующих Preflight.

​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте

hover:border-t-4 , чтобы применять утилиту border-t-4 только при наведении.

 <дел>

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для целевых медиа-запросов, таких как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:border-t-4 , чтобы применить утилиту border-t-4 только при средних размерах экрана и выше.

 <дел>