Border css что это

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; > 

Результат

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

Specification
CSS Backgrounds and Borders Module Level 3 # propdef-border

• 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

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

      • border-radius -related CSS properties: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)

      Found a content problem with this page?

      • Edit the page on GitHub.
      • Report the content issue.
      • View the source on GitHub.

      This page was last modified on 3 авг. 2023 г. by MDN contributors.

      Your blueprint for a better internet.

      Стиль границ

      CSS свойство border-style позволяет установить стиль для границ HTML элемента.

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

      • solid границы будут нарисованы сплошной линией;
      • dashed границы будут нарисованы пунктирной линией;
      • dotted границы будут нарисованы точками;
      • double границы будут нарисованы двойной сплошной линией.

      .bor1 < border-style:solid; >.bor2 < border-style:dashed; >.bor3
      Быстрый просмотр

      Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).

      Цвет границы

      С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.

      Цвет может быть задан следующими способами:

      1. С помощью имени (например ‘red’ задаст красный цвет);
      2. С помощью RGB значения (например ‘rgb(255,255,255)’ задаст белый цвет);
      3. С помощью шестнадцатеричного значения (например ‘#00ff00’ задаст зеленый цвет).

      .bor1 < border-style:solid; border-color:red; >.bor2 < border-style:solid; border-color:green; >.bor3
      Быстрый просмотр

      Толщина границы

      С помощью CSS свойства border-width Вы можете задать толщину границы HTML элемента.

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

      .bor1 < border-style:solid; border-width:4px; >.bor2 < border-style:solid; border-width:2px; >.bor3
      Быстрый просмотр

      Задание стилей для отдельных сторон

      Рассмотренные ранее свойства могут также применяться к отдельным сторонам границы. Их названия перечислены на рисунке ниже:

      

      .bor1 < border-top-style:solid; border-width:2px; >.bor2 < border-bottom-style:solid; border-width:2px; >.bor3
      Быстрый просмотр

      Существует способ быстрого задания стилей границ. Например в результате применения border-style:dashed double solid groove; К верхней границе будет применено dashed, к правой double, к нижней solid, а к левой groove.

      Если Вы укажете только два значения, например border-style:dashed double, то верхняя и нижняя граница будут оформлены как dashed, а левая и правая граница будут оформлены как double.

      Стенографическое задание свойств

      Для того чтобы сократить длину кода, в CSS предусмотрен стенографический способ записи.

      Стенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.

      /* Вокруг элемента с классом bor1 будет отображена сплошная граница зеленого цвета, толщиной 2 пикселя */ .bor1
      Быстрый просмотр

      Порядок следования свойств в стенографической форме записи:

      1. border-width
      2. border-style
      3. border-color

      Обратите внимание: Вы можете пропускать неиспользуемые свойства.

      /* Вокруг элемента с классом bor1 будет отображена сплошная граница толщиной 1 пиксель */ .bor1
      Быстрый просмотр

      Внешняя граница

      Помимо обычной границы элементы могут иметь еще и внешнюю границу, которая задается с помощью CSS свойства outline.

      .out1 < outline-style:dashed; /* определяет стиль внешней границы */ outline-color:green; /* определяет цвет внешней границы */ outline-width:4px; /* определяет ширину внешней границы */ border-style:solid; >

      Быстрый просмотр

      Сделайте сами

      Задание 1 исправьте ошибки оформления (после исправления всех ошибок элементы должны стать оформленными согласно их описанию).

      Моя граница нарисована пунктирной линией.
       
      Моя граница нарисована сплошной линией красного цвета.
       
      Моя граница сверху и снизу нарисована сплошной линией, а слева и справа пунктирной. Границы со всех сторон нарисованы голубым цветом.
      
      
      
      
      
       
      Моя граница нарисована сплошной линией, толщиной 1 пиксель.
       
      Моя граница слева и справа нарисована сплошной линией розового цвета.
       

      Задание 2 оформите элементы согласно их описанию.

      1. Я имею сплошную границу коричневого цвета. 2. Я имею сплошную границу красного цвета слева и справа. 3. Я имею сплошную границу розового цвета сверху, и пунктирную границу голубого цвета слева, справа и снизу. 4. Я имею границу оранжевого цвета толщиной 1 пиксель. 5. Я имею границу красного цвета толщиной 2 пикселя сверху и снизу и пунктирную границу серого цвета слева и справа. 6. Я имею сплошную границу #1435AD цвета и толщиной 1 пиксель. 7. Я имею пунктирную границу #FF8100 цвета и толщиной 1 пиксель сверху и сплошную границу цвета #0B6124 и толщиной 2 пикселя снизу.

      Wisdomweb.ru © 2023.
      Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
      Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.

      Свойство border-style

      Свойство border-style задает стиль границы для всех сторон одновременно или отдельно для каждой стороны. Является свойством-сокращением для следующих свойств: border-left-style , border-right-style , border-top-style , border-bottom-style .

      Синтаксис

      Значения

      Значение	Описание
      solid	Сплошная линия.
      dotted	Граница в виде точек.
      dashed	Граница в виде тире.
      ridge	Граница в виде выпуклой линии.
      double	Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px .
      groove	Вогнутая граница.
      inset	Вдавленная граница.
      outset	Выпуклая граница.
      none	Отсутствие границы.

      Значение по умолчанию: none .

      Количество значений

      Свойство может принимать 1 , 2 , 3 или 4 значений, указываемых через пробел:

      Количество	Описание
      1	Тип для всех сторон одновременно.
      2	Первое значение для верха и низа, второе — для левой и правой границ.
      3	Первое значение для верха, второе — для левой и правой границ, третье — для нижней.
      4	Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы.

      border-style¶

      Свойство border-style устанавливает стиль границы вокруг элемента.

      Допустимо задавать индивидуальные стили для разных сторон элемента.

      Демо¶

      • border
      • border-bottom
      • border-bottom-color
      • border-bottom-left-radius
      • border-bottom-right-radius
      • border-bottom-style
      • border-bottom-width
      • border-collapse
      • border-color
      • border-image
      • border-image-outset
      • border-image-repeat
      • border-image-slice
      • border-image-source
      • border-image-width
      • 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-style
      • border-top
      • border-top-color
      • border-top-left-radius
      • border-top-right-radius
      • border-top-style
      • border-top-width
      • border-width
      • box-shadow

      Синтаксис¶

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

      /* Keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: unset; 

      Значения¶

      Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселей.

      Кроме перечисленных в таблице значений используются следующие ключевые слова.

      Не отображает границу и её толщина border-width задаётся нулевой.

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

      Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

      Табл. 2. Зависимость результата использования от числа значений

      Число значений	Результат
      1	Стиль границы будет задан для всех сторон элемента.
      2	Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
      3	Первое значение задаёт стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
      4	Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

      border-top-style: none; 

      Применяется ко всем элементам

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

      • CSS Backgrounds and Borders Module Level 3
      • CSS Level 2 (Revision 1)
      • CSS Level 1

      Описание и примеры¶

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

       html> head> meta charset="utf-8" /> title>border-styletitle> style> p  border-style: double; /* Стиль линии вокруг абзаца */ padding: 5px; /* Поля вокруг текста */ > style> head> body> p> Развивая эту тему, крещендирующее хождение просветляет миксолидийский райдер. p> body> html> 

      Похожие публикации:

      1. Как обновить ветку git из репозитория
      2. Как поставить windows 10 поверх linux
      3. Мержить что это
      4. Сколько раз за сутки на часах минутная стрелка обгонит часовую