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

Black border color css

На чтение 3 мин
Содержание
  1. CSS border-color Property
  2. Browser Support
  3. CSS Syntax
  4. Property Values
  5. More Examples
  6. Example
  7. Example
  8. Example
  9. Example
  10. Example
  11. Example
  12. CSS Border Color
  13. Example
  14. Specific Side Colors
  15. Example
  16. HEX Values
  17. Example
  18. RGB Values
  19. Example
  20. HSL Values
  21. Example
  22. COLOR PICKER
  23. Report Error
  24. Thank You For Helping Us!
  25. border-color
  26. Try it
  27. Constituent properties
  28. Syntax
  29. Values
  30. Formal definition
  31. Formal syntax
  32. Examples
  33. Complete border-color usage
  34. HTML
  35. CSS
  36. Result
  37. Specifications
  38. Browser compatibility
  39. See also
  40. Found a content problem with this page?
  41. MDN
  42. Support
  43. Our communities
  44. Developers
  45. border
  46. Синтаксис
  47. Значения
  48. Объектная модель
  49. Браузеры

CSS border-color Property

The border-color property sets the color of an element’s four borders. This property can have from one to four values.

If the border-color property has four values:

  • border-color: red green blue pink;
    • top border is red
    • right border is green
    • bottom border is blue
    • left border is pink

    If the border-color property has three values:

    • border-color: red green blue;
      • top border is red
      • right and left borders are green
      • bottom border is blue

      If the border-color property has two values:

      • border-color: red green;
        • top and bottom borders are red
        • right and left borders are green

        If the border-color property has one value:

        Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.

        Default value: The current color of the element
        Inherited: no
        Animatable: yes. Read about animatable Try it
        Version: CSS1
        JavaScript syntax: object.style.borderColor=»#FF0000 blue» Try it

        Browser Support

        The numbers in the table specify the first browser version that fully supports the property.

        CSS Syntax

        Property Values

        Value Description Demo
        color Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element Demo ❯
        transparent Specifies that the border color should be transparent Demo ❯
        initial Sets this property to its default value. Read about initial
        inherit Inherits this property from its parent element. Read about inherit

        More Examples

        Example

        Set a color for the border with a HEX value:

        Example

        Set a color for the border with an RGB value:

        Example

        Set a color for the border with an RGBA value:

        Example

        Set a color for the border with a HSL value:

        Example

        Set a color for the border with a HSLA value:

        Example

        Set a different border-color for each side of an element:

        Источник

        CSS Border Color

        The border-color property is used to set the color of the four borders.

        • name — specify a color name, like «red»
        • HEX — specify a HEX value, like «#ff0000»
        • RGB — specify a RGB value, like «rgb(255,0,0)»
        • HSL — specify a HSL value, like «hsl(0, 100%, 50%)»
        • transparent

        Note: If border-color is not set, it inherits the color of the element.

        Example

        Demonstration of the different border colors:

        p.one <
        border-style: solid;
        border-color: red;
        >

        p.two border-style: solid;
        border-color: green;
        >

        p.three border-style: dotted;
        border-color: blue;
        >

        Specific Side Colors

        The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

        Example

        p.one <
        border-style: solid;
        border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
        >

        HEX Values

        The color of the border can also be specified using a hexadecimal value (HEX):

        Example

        RGB Values

        Example

        HSL Values

        You can also use HSL values:

        Example

        You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.

        Unlock Full Access 50% off

        COLOR PICKER

        colorpicker

        Join our Bootcamp!

        Report Error

        If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

        Thank You For Helping Us!

        Your message has been sent to W3Schools.

        Top Tutorials
        Top References
        Top Examples
        Get Certified

        W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

        Источник

        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

        Универсальное свойство 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 .

        Источник

        Читайте также:  Map для массива javascript
Оцените статью
© 2023 Программирование