Обводка вокруг div 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; > 

Результат

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

  • 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

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

        Синтаксис

        Значения

        Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

        Стили рамок

        border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

        inherit наследует значение родителя.

        HTML5 CSS2.1 IE Cr Op Sa Fx

        В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

        Применение свойства border

        Рис. 2. Применение свойства border

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

        [window.]document.getElementById(» elementID «).style.border

        Браузеры

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

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

        Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

        Источник

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

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

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

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

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

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

        Абзацу добавлена видимая граница border

        Значения свойства 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

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

        Источник

        Читайте также:  Apt get python error
Оцените статью