Html borders and lines

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.

      Источник

      CSS Borders

      The CSS border properties allow you to specify the style, width, and color of an element’s border.

      I have borders on all sides.

      I have a red bottom border.

      I have a blue left border.

      CSS Border Style

      The border-style property specifies what kind of border to display.

      The following values are allowed:

      • dotted — Defines a dotted border
      • dashed — Defines a dashed border
      • solid — Defines a solid border
      • double — Defines a double border
      • groove — Defines a 3D grooved border. The effect depends on the border-color value
      • ridge — Defines a 3D ridged border. The effect depends on the border-color value
      • inset — Defines a 3D inset border. The effect depends on the border-color value
      • outset — Defines a 3D outset border. The effect depends on the border-color value
      • none — Defines no border
      • hidden — Defines a hidden border

      The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

      Example

      Demonstration of the different border styles:

      A groove border. The effect depends on the border-color value.

      A ridge border. The effect depends on the border-color value.

      An inset border. The effect depends on the border-color value.

      An outset border. The effect depends on the border-color value.

      Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

      Источник

      Как создать рамку вокруг элемента. CSS-свойство border

      CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

      В общем виде свойство записывается так:

      border-width — задаёт толщину границы.

      border-style — устанавливает стиль рамки.

      border-color — определяет цвет рамки.

      

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

      Border-width

      Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

      • thin — тонкая граница, обычно около одного пикселя.
      • medium — средняя граница, около трёх пикселей.
      • thick — толстая граница, примерно пять пикселей.

      Border-style

      border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

      hidden — граница скрыта, но она занимает место.

      solid — сплошная линия границы.

      groove — объёмная рифлёная вдавленная рамка.

      ridge — объёмная рифлёная выпуклая рамка.

      inset — объёмная вдавленная рамка.

      outset — объёмная выпуклая рамка.

      Border-color

      border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

      Наследование

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

      ⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

      Для чего использовать свойство border

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

      Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

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

      Нюансы

      Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

      

      Для создания рамок с закруглёнными углами используют свойство border-radius .

      

      Чем заменить свойство

      Для создания более сложных границ или декоративных элементов можно использовать свойства box-shadow , outline или border-image .

      Материалы по теме

      «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

      Источник

      Свойство border

      Свойство border добавляет вокруг элемента рамку заданной толщины, стиля и цвета. Для создания линий на отдельных сторонах элемента используются свойства border-top, border-right, border-bottom и border-left, соответственно устанавливающие линию сверху, справа, снизу и слева. Так же эти свойства могут быть использованы и чтобы убрать линию на определённой стороне.

      border: 2px solid #0069b5; /* Параметры рамки */ border-left: none; /* Убираем линию слева */ border-right: none; /* Убираем линию справа */

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

      Сама рамка идёт после содержимого элемента и пустого пространства, создаваемого padding (рис. 1). Если свойство padding не задано, то рамка начинается сразу вокруг содержимого.

      

      Рис. 1. Положение рамки в элементе

      В примере 1 показано добавление линии слева от цитаты с помощью свойства border-left .

      Пример 1. Использование border-left

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

      

      Свойство border является частью блока и влияет на его размеры. Альтернативой border выступает свойство outline. Вот его особенности:

      • outline не влияет на размеры и положение самого элемента;
      • outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
      • для outline нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
      • свойство border-radius, задающее радиус скругления рамки, не действует на outline ;
      • outline можно расширять и сжимать с помощью outline-offset, отрицательное значение выводит рамку внутри элемента.

      Свойство outline не заменяет border и вполне может существовать вместе с ним. В примере 4 показано сочетание этих свойств.

      Пример 4. Использование outline

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

      Источник

      Читайте также:  Javascript от нуля до гуру