Главная » Языки программирования

border-color

Содержание
  1. border
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. Description
  7. Borders vs. outlines
  8. Formal definition
  9. Formal syntax
  10. Examples
  11. Setting a pink outset border
  12. HTML
  13. CSS
  14. Result
  15. Specifications
  16. Browser compatibility
  17. See also
  18. Found a content problem with this page?
  19. MDN
  20. Support
  21. Our communities
  22. Developers
  23. border-color
  24. Try it
  25. Constituent properties
  26. Syntax
  27. Values
  28. Formal definition
  29. Formal syntax
  30. Examples
  31. Complete border-color usage
  32. HTML
  33. CSS
  34. Result
  35. Specifications
  36. Browser compatibility
  37. See also
  38. Found a content problem with this page?
  39. MDN
  40. Support
  41. Our communities
  42. Developers
  43. border-color
  44. Синтаксис
  45. Значения
  46. Объектная модель
  47. Браузеры
  48. CSS по категориям
  49. Селекторы
  50. border
  51. Синтаксис
  52. Значения
  53. Объектная модель
  54. Браузеры

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset;

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Читайте также:  Handwritten digit recognition python

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element’s content.
  • According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

  • border-width : as each of the properties of the shorthand:
    • border-top-width : medium
    • border-right-width : medium
    • border-bottom-width : medium
    • border-left-width : medium
    • border-top-style : none
    • border-right-style : none
    • border-bottom-style : none
    • border-left-style : none
    • border-top-color : currentcolor
    • border-right-color : currentcolor
    • border-bottom-color : currentcolor
    • border-left-color : currentcolor
    • border-width : as each of the properties of the shorthand:
      • border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
      • border-left-width : the absolute length or 0 if border-left-style is none or hidden
      • border-right-width : the absolute length or 0 if border-right-style is none or hidden
      • border-top-width : the absolute length or 0 if border-top-style is none or hidden
      • border-bottom-style : as specified
      • border-left-style : as specified
      • border-right-style : as specified
      • border-top-style : as specified
      • border-bottom-color : computed color
      • border-left-color : computed color
      • border-right-color : computed color
      • border-top-color : computed color
      • border-color : as each of the properties of the shorthand:
        • border-bottom-color : a color
        • border-left-color : a color
        • border-right-color : a color
        • border-top-color : a color
        • border-bottom-width : a length
        • border-left-width : a length
        • border-right-width : a length
        • border-top-width : a length

        Formal syntax

        border =
        ||
        ||

        =
        |
        thin |
        medium |
        thick

        =
        none |
        hidden |
        dotted |
        dashed |
        solid |
        double |
        groove |
        ridge |
        inset |
        outset

        Examples

        Setting a pink outset border

        HTML

        div>I have a border, an outline, and a box shadow! Amazing, isn't it?div>

        CSS

        div  border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; >

        Result

        Specifications

        Browser compatibility

        BCD tables only load in the browser

        See also

        Found a content problem with this page?

        This page was last modified on Jul 18, 2023 by MDN contributors.

        Your blueprint for a better internet.

        MDN

        Support

        Our communities

        Developers

        Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
        Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

        Источник

        border-color

        The border-color shorthand CSS property sets the color of an element’s border.

        Try it

        You can find more information about border colors in CSS colors.

        Constituent properties

        This property is a shorthand for the following CSS properties:

        Syntax

        /* values */ border-color: red; /* top and bottom | left and right */ border-color: red #f015ca; /* top | left and right | bottom */ border-color: red rgb(240, 30, 50, 0.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* Global values */ border-color: inherit; border-color: initial; border-color: revert; border-color: revert-layer; border-color: unset;

        The border-color property may be specified using one, two, three, or four values.

        • When one value is specified, it applies the same color to all four sides.
        • When two values are specified, the first color applies to the top and bottom, the second to the left and right.
        • When three values are specified, the first color applies to the top, the second to the left and right, the third to the bottom.
        • When four values are specified, the colors apply to the top, right, bottom, and left in that order (clockwise).

        Values

        Defines the color of the border.

        Formal definition

        • border-top-color : currentcolor
        • border-right-color : currentcolor
        • border-bottom-color : currentcolor
        • border-left-color : currentcolor
        • border-bottom-color : computed color
        • border-left-color : computed color
        • border-right-color : computed color
        • border-top-color : computed color
        • border-bottom-color : a color
        • border-left-color : a color
        • border-right-color : a color
        • border-top-color : a color

        Formal syntax

        Examples

        Complete border-color usage

        HTML

        div id="justone"> p>code>border-color: red;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: red;code>li> li>code>border-bottom-color: red;code>li> li>code>border-left-color: red;code>li> ul> div> div id="horzvert"> p>code>border-color: gold red;code> is equivalent top> ul> li>code>border-top-color: gold;code>li> li>code>border-right-color: red;code>li> li>code>border-bottom-color: gold;code>li> li>code>border-left-color: red;code>li> ul> div> div id="topvertbott"> p>code>border-color: red cyan gold;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: cyan;code>li> li>code>border-bottom-color: gold;code>li> li>code>border-left-color: cyan;code>li> ul> div> div id="trbl"> p>code>border-color: red cyan black gold;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: cyan;code>li> li>code>border-bottom-color: black;code>li> li>code>border-left-color: gold;code>li> ul> div>

        CSS

        #justone  border-color: red; > #horzvert  border-color: gold red; > #topvertbott  border-color: red cyan gold; > #trbl  border-color: red cyan black gold; > /* Set width and style for all divs */ div  border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em; > ul  margin: 0; list-style: none; >

        Result

        Specifications

        Browser compatibility

        BCD tables only load in the browser

        See also

        • Border-color related CSS properties: border , border-top-color , border-right-color , border-bottom-color , border-left-color ,
        • Other border-related CSS properties: border-width , border-style
        • The data type
        • Other color-related properties: color , background-color , outline-color , text-decoration-color , text-emphasis-color , text-shadow , caret-color , and column-rule-color
        • Applying color to HTML elements using CSS

        Found a content problem with this page?

        This page was last modified on Jul 18, 2023 by MDN contributors.

        Your blueprint for a better internet.

        MDN

        Support

        Our communities

        Developers

        Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
        Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

        Источник

        border-color

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

        Синтаксис

        border-color: [цвет | transparent] | inherit

        Значения

        transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя.

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

        Табл. 1. Изменение цвета в зависимости от числа значений

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

        HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

               
        Lorem ipsum dolor sit amet
         
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

        Использование свойства border-color

        Рис. 1. Использование свойства border-color

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

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

        Браузеры

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

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

        Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

        CSS по категориям

        Поля

        Анимация

        Градиент

        Скруглённые уголки

        Изображения

        Псевдоэлементы

        Псевдоклассы

        Печать

        Контент

        Интерфейс

        Таблица

        Отступы

        Список

        Текст

        Шрифт

        Форматирование

        Размеры

        Позиционирование

        Границы

        Цвет и фон

        Селекторы

        • Селекторы тегов
        • Идентификаторы
        • Классы
        • Мультиклассы
        • Универсальный селектор
        • Вложенные селекторы
        • Дочерние селекторы
        • Соседние селекторы
        • Родственные селекторы
        • [атрибут$=»значение»]
        • [атрибут*=»значение»]
        • [атрибут~=»значение»]
        • [атрибут|=»значение»]
        • Селекторы атрибутов
        • [атрибут=»значение»]
        • [атрибут^=»значение»]

        Источник

        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 .

        Источник

Оцените статью
© 2024 Программирование