Css border height size

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, например, чтобы bordser-left был 10px или таких свойств нет и нужно будет придумывать другие пути как это сделать?

      

      Подойдите к вопросу иначе. Рамка всегда есть, но ее не видно.
      При наведении, рамка меняет цвет и ее видно.
      Добавив transition: border-color 0.3s; сделаем смену цвета плавной.

      tosster22, вам нужно сразу добавить прозрачный бордер, а при наведении менять цвет, что бы не прыгал блок. Еще вариант использовать box-shadow
      https://codepen.io/michelre/pen/EoPMGv

      

      проблема в том, что нужно height для бордера. Суть такая, есть ссылка и у нее есть padding 20px. Нужно padding оставить такой же, а при наведении добавить рамку которая в 10px

      

      tosster22, что значит высота? У бордера есть «толщина» или имеется в виду размер этого бордера? Так он описывает элемент.

      tosster22, тогда бордер здесь не поможет, можно, например сделать псевдоэлемент с нужной вам высотой, позиционировать его относительно элемента и показывать при наведении на элемент

      Войдите, чтобы написать ответ

      Как сделать адаптивную grid сетку?

      Как передать строку, сформированную при помощи JS, в Livewire?

      Источник

      Border Height in CSS

      

      In web development, the “border” property plays a significant role. They may be utilized to distinguish or highlight stuff on a website, which makes it simple and easy for visitors to perceive and act on the site. Furthermore, the user can also determine the border height. Border height in CSS actually depends on the length of the border lines.

      Sometimes, the user thinks the border will always be applied horizontally according to the element’s boundary. However, this concept is wrong. You can set the border height according to their preferences.

      This post will explain how to set border height in CSS.

      How to Set Border Height in CSS?

      To set the border height in CSS, the “line-height” property is used. This property is commonly used for setting the distance between text lines.

      For this purpose, try out the mentioned instructions.

      Step 1: Create a “div” Container

      Initially, make a “div” container with the help of the “ ” element. Also, assign it a “class” attribute inside the opening tag of the “” element and specify a name for the class according to your choice.

      Step 2: Insert a Heading

      Next, insert a heading by using any heading tag “ ” to “ ”. In this example, we have utilized the “ ” tag.

      Step 3: Make a List

      Then, utilize the “ ” tag to make the ordered list and add the data inside the list with the help of the “ ” tag:

      Источник

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

      Источник

      Читайте также:  Css text align center heights