Html 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 является шорткатом (короткой записью) и объединяет в себе значение для нескольких полных свойств:

      Пример

      Скопировать ссылку «Пример» Скопировано

      Украсим текстовую карточку цветной сплошной рамкой.

         
      Повседневная практика показывает, .
         div class="element"> p>Повседневная практика показывает, . p> div>    Скопировать Скопировано Не удалось скопировать   

      Зададим рамку толщиной 5 пикселей, сплошную, цвета #ED6742:

       .element  border: 5px solid #ed6742;> .element  border: 5px solid #ed6742; >    Скопировать Скопировано Не удалось скопировать   

      

      🛠 Ещё немного про треугольники. А точнее, стрелки. Их тоже можно создать при помощи border , но тут понадобится подключить свойство transform , чтобы повернуть элемент с рамками на 45 градусов в нужную сторону:

       div class="arrows"> div class="arrow _prev">div> div class="arrow _next">div> div>    Скопировать Скопировано Не удалось скопировать   

       .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1;> .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001;> .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg);> .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg );> .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1; > .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001; > .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg); > .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg ); >    Скопировать Скопировано Не удалось скопировать   

      Чем не стрелки для слайдера? 🤗

      🛠 Часто встречающийся дизайнерский приём — появление рамки вокруг элемента при наведении на него курсора мыши.

      Если просто добавлять рамку по селектору :hover , то элемент будет дёргаться. Причина в том, что размер элемента увеличивается на ширину рамки. Чтобы подобных подёргиваний не происходило, изначально задайте рамку нужной толщины, но установите ей прозрачный цвет ( transparent ). А по наведению курсора просто меняйте цвет на нужный. Profit! Вы прекрасны 😄

      Источник

      Как создать рамку вокруг элемента. 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

      

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

      Источник

      Читайте также:  Coding pacman in java