Как указать длину border css
Перейти к содержимому

Как указать длину border css

  • автор:

border — width

Задаёт ширину рамки элемента. Часто указывается в шорткате, но иногда пригождается и отдельно.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — width управляет толщиной рамки элемента.

Пример

Скопировать ссылку «Пример» Скопировано

Для того чтобы увидеть работу свойства, необходимо помимо толщины рамки добавить ещё и значение свойства border — style .

 

Блок текста, обведённый рамкой

p class="text">Блок текста, обведённый рамкойp>
 .text  border-style: solid; border-width: 4px;> .text  border-style: solid; border-width: 4px; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для задания толщины можно использовать три переменные — thin , medium или thick , в большинстве браузеров это соответствует размерам 2 px, 4 px и 6 px соответственно.

Сама же спецификация не приравнивает эти переменные к определённому размеру, а только говорит что значение thin должно быть меньше medium , а оно, в свою очередь, меньше thick , остальное контролируется на уровне браузера. Поэтому, для более точного значения, толщину можно указывать в пикселах или других единицах измерения .

Ключевое слово inherit наследует значение родителя, а initial применяет значение по умолчанию, равное medium .

Разрешается указывать одно, два, три или четыре значения. В зависимости от этого получится разный результат:

  1. border — width : 1px — одно значение, толщина рамки со всех сторон одинаковая.
  2. border — width : 1px 2px — два значения, первое устанавливает толщину рамки сверху и снизу, второе — слева и справа.
  3. border — width : 1px 2px 3px — три значения, первое значение устанавливает толщину рамки сверху, второе — слева и справа, а третье — снизу.
  4. border — width : 1px 2px 3px 4px — четыре значения, устанавливает для каждой стороны свою толщину, поочерёдно: для верхней, правой, нижней и левой рамки.

Чаще всего это свойство используется в шорткате border , так как обычно задаётся сразу и цвет и стиль и толщина рамки, а сокращённая форма позволяет сделать это более элегантно.

На этом демо можете посмотреть как выглядят разные размеры толщины рамки при разных значениях стиля рамки.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

�� Значение по умолчанию medium .

�� Можно анимировать, читайте подробнее про CSS — анимации .

�� Поддерживается всеми современными браузерами.

border-left-width

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

Песочница

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

div < background: #e4efc7; border-left: double #333; padding: 10px; border-left-width: >px; >

Пример

border-left-width

Обратите внимание!

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

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

Использование свойства border-left-width

Рис. 1. Использование свойства border-left-width

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

Объект.style.borderLeftWidth

Примечание

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

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

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

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

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

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

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

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

Браузеры

4 8 12 1 9.2 1 1

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

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

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

См. также

  • border-bottom-width
  • border-right-width
  • border-top-width
  • border-width
  • Граница в CSS

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

border-width

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

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

    Синтаксис

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

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

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

    Длина рамки CSS

    alt text

    Как сделать рамку длиннее или наоборот?

    Отслеживать

    51.3k 87 87 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков

    задан 21 мар 2012 в 14:34

    190 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков

    Рамка не может быть длиннее или короче. Вообще нельзя влиять на рамку ее свойствами. Она зависит от размеров элемента, вокруг которого она строится. И, как вам уже подсказали, это можно сделать изменением размеров элемента или его внутренними отступами

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

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