Css border size: html — Border Height on CSS

Leave a Comment / Css / By /

CSS border-width

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Задайте ширину границ:

div {border-width: thin;}

Подробнее примеры ниже.

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

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

Примеры:

  • border-width: thin medium thick 10px;
    • top border is thin
    • right border is medium
    • bottom border is thick
    • left border is 10px

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

  • border-width: thin medium;
    • top and bottom borders are thin
    • right and left borders are medium

  • border-width: thin;
    • all four borders are thin

Примечание: Всегда объявляйте свойство border-style перед border-width свойством.

Элемент должен иметь границы, прежде чем можно задать ширину.

Значение по умолчанию:medium
Inherited:no
Animatable:yes. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object.style.borderWidth=»1px 5px»

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

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

Свойство
border-width1.04.01.01.03.5

Синтаксис CSS

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

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

ЗначениеОписание
mediumЗадает среднюю границу.
Это значение по умолчанию
thinЗадает тонкую границу
thickЗадает толстую границу
lengthПозволяет определить толщину границы. Читать о единицах длины
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Задайте ширину границ для среднего:

div {border-width: medium;}

Пример

Задайте ширину границ толщиной:

div {border-width: thick;}

Пример

Задайте ширину границ для 1px:

div {border-width: 1px;}

Пример

Задайте ширину границ для 15пкс:

div {border-width: 15px;}

Пример

Задайте ширину верхней и нижней границ 10px, а ширину левой и правой границ 1px:

div {border-width: 10px 1px;}

Похожие страницы

CSS Справочник: CSS Border

HTML DOM Справочник: borderWidth Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css

списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

border-width | 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Поочерёдно устанавливается толщину верхней, правой, нижней и левой границ.

Песочница

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

div {
  background: #e4efc7;
  border: dotted #333;
  padding: 10px;
  border-width: {{ playgroundValue }}px;
}

Пример

<!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.

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

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

Объект.style.borderWidth

Примечание

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

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

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

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

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

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

Браузеры

481219.211
1161
Браузеры

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

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

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

Границы

См. также

  • border-bottom-width
  • border-left-width
  • border-right-width
  • border-top-width

border — CSS: Каскадные таблицы стилей

Свойство CSS border устанавливает границу элемента. Он устанавливает значения border-width , border-style и border-color .

Это свойство является сокращением для следующих свойств CSS:

  • цвет границы
  • с каймой
  • ширина границы 
 /* стиль */
граница: сплошная;
/* ширина | стиль */
граница: 2px пунктирная;
/* стиль | цвет */
граница: начало #f33;
/* ширина | стиль | цвет */
граница: средняя пунктирная зеленая;
/* Глобальные значения */
граница: наследовать;
граница: начальная;
граница: возврат;
граница: обратный слой;
граница: не установлена;

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

Примечание: Граница будет невидимой, если ее стиль не определен. Это связано с тем, что стиль по умолчанию равен none .

Значения

Устанавливает толщину границы. По умолчанию средний если отсутствует. См. ширина границы .

<стиль строки>

Устанавливает стиль границы. По умолчанию нет если отсутствует. См. стиль границы .

<цвет>

Задает цвет границы. По умолчанию currentcolor , если отсутствует. См. цвет границы .

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

Сокращение border особенно полезно, когда вы хотите, чтобы все четыре границы были одинаковыми. Однако, чтобы сделать их отличными друг от друга, вы можете использовать длинные свойства border-width , border-style и border-color , которые принимают разные значения для каждой стороны. Кроме того, вы можете нацеливать одну границу за раз с помощью физической (например, border-top ) и логические (например, border-block-start ) свойства границ.

Границы и контуры

Границы и контуры очень похожи. Однако контуры отличаются от границ следующими способами:

  • Контуры никогда не занимают места, так как они рисуются за пределами содержимого элемента.
  • Согласно спецификации контуры не обязательно должны быть прямоугольными, хотя обычно они таковыми и являются.
Исходное значение как каждое из свойств сокращения:
  • border-width : как каждое из свойств сокращения:
    • border-top-width : medium border- 0 Ширина : Средняя
    • Пограничная ширина : Средняя
    • Пограничная левая ширина : Средняя
  • Стиль : как у каждого из властей. :
    • Стиль границы : Нет
    • Стиль пограничной границы : Нет
    • Стиль пограничной суммы : Нет
    • Граница-погранично-строительство 9000:
    • 9000:
    • Нет
  • Пограничный цвет : как каждое из свойств сокращения:
    • Пограничный пограничный цвет : Currentcolor
    • -Crover-Color : .0005
    • Border-Bottom-Color : CurrentColor
    • Пограничный левый цвет : CurrentColor
Applies до9999999
ALPLEES. Это также относится к ::first-letter .
Унаследовано нет
Вычисленное значение как каждое из свойств сокращения:
  • свойства сокращения: свойств0120
    • Пограничная палочка : Абсолютная длина или 0 , если Стиль пограничному и стилям - Нет или Hidden
    • . , если border-left-style is none или hidden
    • border-right-width : абсолютная длина или 00005
    • Граница с шириной : Абсолютная длина или 0 , если Стиль границы - Нет или Hidden
  • Граница : как каждый из властей из властей из властей из властей из властей из властей из властей из властей из власти сокращение:
    • стиль границы снизу : как указано
    • стиль границы слева : как указано
    • стиль границы справа : как указано
    • : как указано
    • : как указано как указано
  • border-color : as каждое из свойств сокращенной записи:
    • border-bottom-color : вычисленный цвет
    • border-left-color :02d color :02d color -color : расчетный цвет
    • . 0005 : как каждое из свойств сокращения:
      • цвет нижней границы : цвет
      • цвет левой границы : цвет
      • цвет границы 10 20 : цвет : цвет
      • цвет границы справа border-top-color : цвет
    • border-style : дискретный
    • border-width : как каждое из свойств сокращения:

          7 9000 длина

        • по границе левой шириной : длина
        • Граница-правая ширина : длина
        • Граница с шириной : длина
 Граница = 6    
 = 
  || 
 <стиль строки> || 
 <цвет> 
 "> = 
  | 
 тонкий | 
 средний | 
 толстый 
 
 "> = 
 нет | 
 скрытый | 
 с точками | 
 пунктир | 
 твердый | 
 двойной | 
 канавка | 
 гребень | 
 вставка | 
 начало 
 
 Установка розовой границы начала 
 HTML 
 
У меня есть граница, контур и тень блока! Удивительно, не так ли?

 
 CSS 
 раздел {
  кайма: 0,5рем, начало розовое;
  канва: 0,5рем однотонный хаки;
  box-shadow: 0 0 0 2rem небесно-голубой;
  радиус границы: 12px;
  шрифт: жирный 1rem без засечек;
  поля: 2re;
  набивка: 1рем;
  смещение контура: 0,5 бэр;
}
 
 Результат 
 # Propdef-грамот  # Propdef-грамот  # propdef-грамотный состав  # wropdef-грамотный состав  № 
. Включите JavaScript для просмотра данных.
  •   ширина границы 
  •   с каймой 
  •   цвет рамки 
  •   контур 
  •  Фоны и рамки
  •  Изучение CSS: фоны и границы
 Обнаружили проблему с содержанием этой страницы? 
  •  Отредактируйте страницу на GitHub.
  •  Сообщить о проблеме с содержимым.
  •  Посмотреть исходный код на GitHub.
 Хотите принять участие?
 Узнайте, как внести свой вклад.
 Последний раз эта страница была изменена  участниками MDN.
 Размер границы CSS 
 «В этой статье мы объясним, как изменить размер границы, используя различные подходы в CSS в файле HTML. Контейнер div содержит границу со многими различными стилями и эстетическими атрибутами, такими как цвет, размер, форма и т. д. В этой статье мы будем использовать Notepad++ для редактирования HTML-файла, изменяя размер границы с помощью различных свойств, предоставляемых CSS, таких как Ширина границы».
 Пример 01: Использование CSS тега стиля для изменения размера границы в файле HTML 
 В этом примере мы будем изменять размер границы контейнера div с помощью CSS в теге заголовка в файле HTML. Мы определим универсальную функцию для всех контейнеров div, которые будут созданы в этом файле, чтобы иметь предопределенный стиль редактирования, который мы определим в разделе div, присутствующем в теге стиля. Итак, для выполнения этой задачи мы сгенерируем следующий сценарий:
 Как мы видим в приведенном выше сценарии HTML-файла, мы открыли тег стиля, в котором вызывается div, который имеет несколько свойств, определенных одним один. Во-первых, это заполнение, которое даст контейнеру div пространство между страницей браузера и границами. Затем мы вызвали само свойство границы, и в этом свойстве мы определим размер границы и тип границы; в нашем случае установлено значение «1px» и «solid». Затем мы добавили веб-комплекты, которые будут поддерживать наиболее часто используемые браузеры в той же функции свойства. Затем мы закрыли тег стиля и заголовка и открыли тег тела. В этом теге мы упомянули все, что будет присутствовать на странице после открытия этого файла в браузере.
 Мы добавили заголовок с помощью тега «h3», а также добавили контейнер div с текстом внутри. Этот контейнер div унаследует все свойства, определенные в теге стиля, который присутствует в заголовке файла. После этого эти теги будут закрыты. А теперь мы сохраним этот файл в формате «.html» и откроем его в браузере, чтобы увидеть следующий вывод:
 Как мы видим в приведенном выше выводе, заголовок и контейнер div присутствуют, и граница контейнера также показана тонким размером вместе с некоторым текстом в нем.
 Теперь мы отредактируем приведенный выше скрипт и внесем изменения в размер границы в теге стиля раздела заголовка, чтобы визуализировать разницу между размером границы контейнера.
 Мы изменили размер с «1px» на «5px» в приведенном выше скрипте, чтобы создать более толстую рамку для контейнера. Давайте теперь посмотрим, как это изменение отображается в нашем браузере, когда мы запускаем скрипт.
 Как видно из приведенного выше вывода, размер границы теперь стал толще по сравнению с предыдущим выводом.
 Пример # 02: Создание класса в теге стиля CSS для управления размером границы в файле HTML 
 В этом примере мы создадим специальный класс стилей CSS, в котором мы определим каждый аспект стиля, который мы хочу во всем файле. Это очень полезный метод, потому что мы можем различать разные дизайны в одном файле HTML и классифицировать их по разным классам. В этом примере мы классифицируем стиль границы любого контейнера. Для этого напишем следующий скрипт:
 Как видно из этого скрипта, мы открыли тег стиля в заголовке HTML-файла. В этом теге стиля мы создали класс для стиля тега абзаца, в котором мы определили два свойства границы: стиль и ширину. Для свойства стиля установлено значение сплошной, что означает, что граница будет однородной прямой линией, а для свойства ширины установлено значение тонкое, что означает, что размер границы будет тонким. После этого мы закрыли тег стиля и заголовка и перешли к тегу тела. В теге body мы дали заголовок и абзац HTML-странице. В теге Paragraph мы назвали класс «p.bw1», в котором предварительно определены свойства границ. Мы закроем теги и сохраним этот файл, чтобы мы могли запустить его в нашем браузере.
 После запуска этого скрипта в нашем браузере мы получим приведенный выше вывод. Как мы видим, класс стиля для тега абзаца добавил сплошную и тонкую границу к абзацу, присутствующему в теле.
 Теперь мы изменим размер границы, присутствующей в приведенном выше скрипте, и посмотрим, как эти изменения повлияют на границу.
 В этой ситуации мы изменили ширину с тонкой на среднюю, и после запуска этого скрипта мы получим следующий вывод:
 В этом выводе размер рамки изменился с тонкой на среднюю, и теперь она стала гораздо более заметной. После этого мы изменим размер со среднего на толстый, как показано в приведенном ниже сценарии:
 После запуска этого сценария мы получим следующий вывод:
 После изменения ширины на толстый мы можем увидеть что граница очень широкая по размеру и довольно хорошо видна.
 Пример # 03: Использование таблицы стилей Tailwind CSS для изменения размера границы с использованием класса границы 
 В этом примере мы будем использовать таблицу стилей Tailwind CSS для изменения размера границы с помощью класса границы, определенного в этой таблице стилей. Класс границы имеет несколько предопределенных размеров границы, которые мы рассмотрим в этом примере, реализовав это в Notepad++.
 В приведенном выше сценарии мы добавим ссылку на таблицу стилей Tailwind CSS, используя тег ссылки в заголовке файла. Затем мы откроем тег body и дадим ему заголовок. Затем мы откроем тег div, который мы назовем классом border-2 с цветовым кодом границы, а затем в теге абзаца будет заключен основной текст контейнера div. Теперь мы сохраним этот файл и откроем его в нашем браузере, чтобы посмотреть, как получится граница.
 Поскольку мы видим, что размер границы очень тонкий и его можно увеличить, поэтому мы увеличим размер, вызвав класс border-8 и посмотрим, как он изменит размер границы.
 Как видно из приведенного выше фрагмента, граница теперь толще, чем раньше, из-за класса border-8.
 Заключение 
 В этой статье мы сосредоточились на CSS-атрибуте «размер» границы. Размер границы обычно указывается двумя идентификаторами: пикселями и текстовым представлением, таким как «тонкий», «средний» и «толстый». В этой статье мы обсудили несколько способов изменить размер границы с помощью CSS в файле HTML. Мы использовали среду Notepad++ для редактирования нашего HTML-файла и реализовали обычные CSS-методы тега стиля и класса стиля для изменения размера границы. Мы также использовали таблицу стилей Tailwind CS для вызова ее классов границ, которые предоставляли разные размеры для границы контейнера и могут вызываться с помощью встроенных стилей CSS.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  
  

 
 Спецификация
 CSS-фон и границы модуля 3 
  # propdef-грамотный состав