Css border line 1px

border

The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the element it is applied to.

• border-width : Specifies the thickness of the border.
  • : A numeric value measured in px , em , rem , vh and vw units.
  • thin : The equivalent of 1px
  • medium : The equivalent of 3px
  • thick : The equivalent of 5px
  • solid : A solid, continuous line.
  • none (default): No line is drawn.
  • hidden : A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
  • dashed : A line that consists of dashes.
  • dotted : A line that consists of dots.
  • double : Two lines are drawn around the element.
  • groove : Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
  • ridge : Similar to groove , but reverses the color values in a way that makes the element appear raised.
  • inset : Adds a split tone to the line that makes the element appear slightly depressed.
  • outset : Similar to inset , but reverses the colors in a way that makes the element appear slightly raised.

  Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

  The border property is a shorthand for the following border-related properties:

  Physical Properties	Logical Properties
  border-top	border-block-start
  border-bottom	border-block-end
  border-left	border-inline-start
  border-right	border-inline-end

  We can declare borders in just the block or inline direction since a couple of those logical properties have their own shorthands:

  You can count on excellent support for the border property across all browsers.

  Chrome	Safari	Firefox	Opera	IE	Android	iOS
  Yes	Yes	Yes	3.5+	4+	Yes	Yes

  Источник

  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

        

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

        Источник

        СSS стили для горизонтальных линий

        Сборник горизонтальных линий с тегом

        ---

        разных видов и стилей.

        Сплошные линии

        Двойная линия

        Многострочная линия

        Двухцветная линия

        Трехцветная линия

        Горизонтальный градиент

        Вертикальный градиент

        Линия с тенью

        Замыленная линия

        Линия «Полка»

        Пунктирные линии

        Пунктирная линия с фоном

        Пунктирная линия с градиентом

        Точечные линии

        Линия из крупных точек

         
        ') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

        Разное

        Вертикальные линии

        Линии под углом

        Наклонные линии

        Комментарии 2

        Авторизуйтесь, чтобы добавить комментарий.

        Другие публикации

        

        Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

        

        Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

        

        Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

        Источник

        Читайте также:  Как запустить код через командную строку python