Css border line size

border-inline-width

The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width , or border-left-width , and border-right-width property depending on the values defined for writing-mode , direction , and text-orientation .

Try it

The border width in the other dimension can be set with border-block-width , which sets border-block-start-width , and border-block-end-width .

Syntax

/* values */ border-inline-width: 5px 10px; border-inline-width: 5px; border-inline-width: thick; /* Global values */ border-inline-width: inherit; border-inline-width: initial; border-inline-width: revert; border-inline-width: revert-layer; border-inline-width: unset; 

Values

The width of the border. See border-width .

Formal definition

Initial value	medium
Applies to	all elements
Inherited	no
Percentages	logical-width of containing block
Computed value	absolute length; 0 if the border style is none or hidden
Animation type	by computed value type

Formal syntax

Источник

border

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

border: 1px; border: 2px dotted; border: medium dashed green; 

Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Синтаксис

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

Значения

Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .

Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).

Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

Обычный синтаксис

border =
|| (en-US)
|| (en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset

Примеры

HTML

div class="fun-border">Look at my borders.div> p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!p> style contenteditable> .fun-border  border: 2px solid red; > style> 

CSS

style  display: block; border: 1px dashed black; > 

Результат

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

• border-width : как и у каждого из подсвойств этого свойства:
  • border-top-width (en-US): medium
  • border-right-width (en-US): medium
  • border-bottom-width (en-US): medium
  • border-left-width (en-US): medium
  • border-top-style (en-US): none
  • border-right-style (en-US): none
  • border-bottom-style (en-US): none
  • border-left-style (en-US): none
  • border-top-color (en-US): currentcolor
  • border-right-color (en-US): currentcolor
  • border-bottom-color (en-US): currentcolor
  • border-left-color (en-US): currentcolor
  • border-width : как и у каждого из подсвойств этого свойства:
    • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
    • border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
    • border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
    • border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
    • border-bottom-style (en-US): как указано
    • border-left-style (en-US): как указано
    • border-right-style (en-US): как указано
    • border-top-style (en-US): как указано
    • border-bottom-color (en-US): вычисленный цвет
    • border-left-color (en-US): вычисленный цвет
    • border-right-color (en-US): вычисленный цвет
    • border-top-color (en-US): вычисленный цвет
    • border-color (en-US): как и у каждого из подсвойств этого свойства:
      • border-bottom-color (en-US): цвет
      • border-left-color (en-US): цвет
      • border-right-color (en-US): цвет
      • border-top-color (en-US): цвет
      • border-bottom-width (en-US): длина
      • border-left-width (en-US): длина
      • border-right-width (en-US): длина
      • border-top-width (en-US): длина

      Совместимость браузеров

      BCD tables only load in the browser

      Также смотрите

      Found a content problem with this page?

      This page was last modified on 11 февр. 2023 г. by MDN contributors.

      Your blueprint for a better internet.

      Источник

      border-width

      The border-width shorthand CSS property sets the width of an element’s border.

      Try it

      Constituent properties

      This property is a shorthand for the following CSS properties:

      Syntax

      /* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* values */ border-width: 4px; border-width: 1.2rem; /* top and bottom | left and right */ border-width: 2px 1.5em; /* top | left and right | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global values */ border-width: inherit; border-width: initial; border-width: revert; border-width: revert-layer; border-width: unset; 

      The border-width property may be specified using one, two, three, or four values.

      • When one value is specified, it applies the same width to all four sides.
      • When two values are specified, the first width applies to the top and bottom, the second to the left and right.
      • When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
      • When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).

      Values

      Defines the width of the border, either as an explicit nonnegative or a keyword. If it’s a keyword, it must be one of the following values:

      Note: Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

      Formal definition

      • border-top-width : medium
      • border-right-width : medium
      • border-bottom-width : medium
      • border-left-width : medium
      • border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
      • border-left-width : the absolute length or 0 if border-left-style is none or hidden
      • border-right-width : the absolute length or 0 if border-right-style is none or hidden
      • border-top-width : the absolute length or 0 if border-top-style is none or hidden
      • border-bottom-width : a length
      • border-left-width : a length
      • border-right-width : a length
      • border-top-width : a length

      Formal syntax

      Examples

      A mix of values and lengths

      HTML

      p id="one-value">one value: 6px wide border on all 4 sidesp> p id="two-values"> two different values: 2px wide top and bottom border, 10px wide right and left border p> p id="three-values"> three different values: 0.3em top, 9px bottom, and zero width right and left p> p id="four-values"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left p> 

      CSS

      #one-value  border: ridge #ccc; border-width: 6px; > #two-values  border: solid red; border-width: 2px 10px; > #three-values  border: dotted orange; border-width: 0.3em 0 9px; > #four-values  border: solid lightgreen; border-width: thin medium thick 1em; > p  width: auto; margin: 0.25em; padding: 0.25em; > 

      Result

      Specifications

      Browser compatibility

      BCD tables only load in the browser

      See also

      Found a content problem with this page?

      This page was last modified on Feb 21, 2023 by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      Все о свойстве 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-класс и применять его к множеству элементов на странице.

      Источник