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

border-color

Содержание
  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. border-color
  13. Синтаксис
  14. Значения
  15. Объектная модель
  16. Браузеры
  17. CSS по категориям
  18. Селекторы
  19. border-color
  20. Try it
  21. Constituent properties
  22. Syntax
  23. Values
  24. Formal definition
  25. Formal syntax
  26. Examples
  27. Complete border-color usage
  28. HTML
  29. CSS
  30. Result
  31. Specifications
  32. Browser compatibility
  33. See also
  34. Found a content problem with this page?
  35. MDN
  36. Support
  37. Our communities
  38. Developers
  39. Все о свойстве border
  40. Основы
  41. Border-Radius
  42. Несколько границ
  43. Изменение углов
  44. CSS фигуры
  45. Создание Speech Bubble
  46. Итог

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:

        Источник

        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-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

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

        Источник

      Читайте также:  Работа графическими файлами java
Оцените статью
© 2024 Программирование