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

Css border color top bottom

Содержание
  1. border-color
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. Formal definition
  7. Formal syntax
  8. Examples
  9. Complete border-color usage
  10. HTML
  11. CSS
  12. Result
  13. Specifications
  14. Browser compatibility
  15. See also
  16. Found a content problem with this page?
  17. MDN
  18. Support
  19. Our communities
  20. Developers
  21. border
  22. Try it
  23. Constituent properties
  24. Syntax
  25. Values
  26. Description
  27. Borders vs. outlines
  28. Formal definition
  29. Formal syntax
  30. Examples
  31. Setting a pink outset border
  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. CSS Border Color
  44. Example
  45. Specific Side Colors
  46. Example
  47. HEX Values
  48. Example
  49. RGB Values
  50. Example
  51. HSL Values
  52. Example
  53. COLOR PICKER
  54. Report Error
  55. Thank You For Helping Us!
  56. border-color¶
  57. Демо¶
  58. Синтаксис¶
  59. Значения¶
  60. Спецификации¶
  61. Описание и примеры¶

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).
Читайте также:  Css нажатие кнопки на телефоне

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

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 .

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.

        Источник

        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¶

        Свойство border-color устанавливает цвет границы на разных сторонах элемента.

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

        Демо¶

        Каждую сторону можно установить по отдельности, используя border-top-color , border-right-color , border-bottom-color и border-left-color ; или с использованием режима записи border-block-start-color , border-block-end-color , border-inline-start-color и border-inline-end-color .

        Это свойство является сокращением для следующих свойств CSS:

        • border
        • border-bottom
        • border-bottom-color
        • border-bottom-left-radius
        • border-bottom-right-radius
        • border-bottom-style
        • border-bottom-width
        • border-collapse
        • border-color
        • border-image
        • border-image-outset
        • border-image-repeat
        • border-image-slice
        • border-image-source
        • border-image-width
        • border-left
        • border-left-color
        • border-left-style
        • border-left-width
        • border-radius
        • border-right
        • border-right-color
        • border-right-style
        • border-right-width
        • border-style
        • border-top
        • border-top-color
        • border-top-left-radius
        • border-top-right-radius
        • border-top-style
        • border-top-width
        • border-width
        • box-shadow

        Синтаксис¶

         1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
        /* 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;

        Значения¶

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

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

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

        Значение по-умолчанию: Значение свойства color

        Применяется ко всем элементам

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

        Описание и примеры¶

         1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
         html> head> meta charset="utf-8" /> title>border-colortitle> style> h1  border-color: red white; /* Цвет границы */ border-style: solid; /* Стиль границы */ > p  border-color: #008a77; /* Цвет границы */ border-style: solid; /* Стиль границы */ padding: 5px; /* Поля вокруг текста */ > style> head> body> h1>Шоу-бизнес как внутридискретное арпеджиоh1> p> Септаккорд, согласно традиционным представлениям, иллюстрирует однокомпонентный шоу-бизнес. p> body> html>

        Источник

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