Цвет рамки css: color — свойство css :: руководство cssdot.ru

Leave a Comment / Css / By /

Свойство border-color — цвет границы

Свойство border-color задает цвет границы для всех сторон одновременно или отдельно для каждой стороны. Значением свойства служат любые единицы для цвета. Значение по умолчанию: такой же цвет, как и у текста блока.

Свойство является свойством-сокращением для следующих свойств: border-left-color, border-right-color, border-top-color, border-bottom-color.

Синтаксис

селектор { border-color: цвет; }

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

КоличествоОписание
1Тип для всех сторон одновременно.
2Первое значение для верха и низа, второе — для левой и правой границ.
3Первое значение для верха, второе — для левой и правой границ, третье — для нижней.
4 Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы.

Пример

Давайте покрасим границу блока в красный цвет:

<div></div>#elem { border-width: 1px; border-style: solid; border-color: red; width: 300px; height: 100px; }

:

Пример

Зададим красную границу для верхней и нижней стороны, а голубую для правой и левой стороны:

<div></div>#elem { border-width: 1px; border-style: solid; border-color: red blue; width: 300px; height: 100px; }

:

Пример

Зададим красную границу для верхней стороны, голубую для правой, зеленую для нижней, черную для левой стороны:

<div></div>#elem { border-width: 1px; border-style: solid; border-color: red blue green black; width: 300px; height: 100px; }

:

Пример

Зададим одновременно разную толщину, тип и цвет границы:

<div></div>#elem { border-width: 1px 2px 3px 4px; border-style: dashed dotted solid double; border-color: red blue green black; width: 300px; height: 100px; }

:

Пример

Если цвет границы не задан в border-color — он возьмется из свойства

color:

<div></div>#elem { color: red; border-style: solid; border-width: 2px; width: 300px; height: 100px; }

:

Смотрите также

  • свойство border-width,
    которое задает толщину границы
  • свойство border-style,
    которое задает тип границы
  • свойство border,
    которое является свойством-сокращением для границы

150.

Свойство border для создания границ — Отступы, рамки, поля — codebra

Для создания границы вокруг элемента используется универсальное свойство border. При помощи него можно устанавливать цвет, толщину и стиль линий рамки. Значения можно указывать в любом порядке через пробел. Рассмотрим синтаксис:

Код CSS

div {
border: width style color;
}

Снова повторюсь, что width, style, color могут быть в любой последовательности. Значение width, это толщина границы, измеряемая в допустимых для CSS единицах измерения. Значение color, это цвет рамки, значение тоже может быть любое, разрешенное в CSS. Значение style устанавливает стиль границы, и он может быть следующим:

  • dotted — пунктирная линия
  • dashed — тоже пунктирная, но штрихи чуть-чуть длиннее
  • solid — обычная, сплошная линия
  • double — двойная сплошная линия
  • groove — градиент с затемнением наружу
  • ridge — градиент с затемнением внутрь
  • inset — тоже градиент
  • outset — и это градиент

Далее посмотрим пример создания границы толщиной 2 пикселя, сплошной и черного цвета:

Код CSS

div {
border: 2px solid #000;
}

Совместно со свойством border можно использовать свойства

border-color, border-width и border-style. При помощи border-color можно устанавливать цвета для левой, верхней, правой и нижней границы отдельно. Аналогично, свойство border-width поможет изменить толщину рамки с каждой стороны по отдельности. Со свойством border-style все так же, только задает стиль границы. Далее пример:

Код CSS

div {
border: 2px solid #000;
border-color: #000 #555;
border-width: 10px 5px 10px 5px;
border-style: inset groove solid;
}

Что означает количество значений, перечисленное через пробел:

  • 1 значение — граница задается со всех сторон одинаково;
  • 2 значения — первое задает от верхнего и нижнего краёв, второе от левого и правого краёв;
  • 3 значения — первое от верхнего, второе от левого и правого, третье от нижнего краёв;
  • 4 значения — задает от всех краёв в следующей последовательности: верх, право, низ, лево.

В CSS есть возможность скруглять уголки рамки, а если она не установлена, то скругляется фон. Для этого используется свойство border-radius. Допустимо писать от одного до четырех значений, причем каждое можно писать через косую черту (радиус по горизонтали/радиус по вертикали). Далее рассмотрим пример:

Код CSS

div {
border-radius: 5px;
border-radius: 5px 10px;
border-radius: 5px/10px 20px/5px;
/* и так далее */
}
  • 1 значение — уголки скругляются со всех сторон одинаково.
  • 2 значения — первое задает для верхнего левого и нижнего правого уголков, второе для правого верхнего и нижнего левого.
  • 3 значения — первое задает для верхнего левого уголка, второе для правого верхнего и левого нижнего, а третье, для правого нижнего уголка.
  • 4 значения — задает для всех уголков в следующей последовательности: левый верхний, правый верхний, правый нижний и левый нижний.

Свойство outline для создания внешних границОтступы, рамки, поля

Свойство background для работы с фономЦвета и фон

Рамки для таблиц, строк и ячеек в HTMLТаблицы

Первое знакомство с PythonЗнакомство с Python

Добавляем градиент к фону элементаЦвета и фон

Универсальные атрибуты в HTMLРазметка текста

Написание модулей в PythonЗнакомство с Python

Управляющие последовательности в JavaScriptТипы и переменные

Нумерованный список в HTMLРазметка текста

Предыдущий урок «149. Свойство padding для установки полей» Следующий урок «151. Свойство outline для создания внешних границ»

color — CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на включение.

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

Дополнительную информацию о цветах границ можно найти в разделе Границы в разделе Применение цвета к элементам HTML с помощью CSS.

Учредительные свойства

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

  • цвет нижней границы
  • граница левая цвет
  • граница правого цвета
  • цвет верхней границы

Синтаксис 

 /* значения  */
цвет границы: красный;
/* горизонтальный | вертикальный */
цвет границы: красный #f015ca;
/* сверху | вертикальный | низ */
цвет границы: красный rgb(240,30,50,.7) зеленый;
/* сверху | право | дно | левый */
цвет границы: красный желтый зеленый синий;
/* Глобальные значения */
цвет границы: наследовать;
цвет границы: начальный;
цвет границы: не установлен;

Свойство border-color может быть указано с использованием одного, двух, трех или четырех значений.

  • Когда указано одно значение , применяется один и тот же цвет ко всем четырем сторонам .
  • Когда указаны два значения , первый цвет применяется к верхнему и нижнему , второй — к левому и правому .
  • Когда указаны три значения , первый цвет применяется к 9 верхним 0006 , второй до слева и справа , третий до снизу .
  • Когда указаны четыре значения , цвета применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

<цвет>
Определяет цвет границы.

Формальное определение

Исходное значение Как каждый из свойств стенографии:
  • .
  • border-left-color : currentcolor
Применяется ко всем элементам. Это также относится к ::first-letter .
Унаследован no
Вычисленное значение Как каждый из свойств сокращения:
  • Competme-Color : Computed
  • Граница погранично-красовой : Computed Color
  • . border-right-color : вычисленный цвет
  • border-top-color : вычисленный цвет
Тип анимации как каждое из свойств сокращения:
  • border-bottom-color : цвет
  • border-left-color : цвет
  • border-right-color : цвет
  • border-top-color 5 90 8 color : 9000

Формальный синтаксис 

 <цвет>{1,4} 
, где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <названный цвет> | текущий цвет | <устаревший-системный-цвет>  
 
 где 
   = rgb( {3} [ /  ]? ) | rgb(<число>{3} [/<альфа-значение>]?) | rgb(<процент>#{3}, <альфа-значение>?) | rgb(<число>#{3}, <альфа-значение>?) 
  = rgba(<процент>{3} [/<альфа-значение>]?) | rgba(<число>{3} [/<альфа-значение>]?) | rgba(<процент>#{3}, <альфа-значение>?) | rgba(<число>#{3}, <альфа-значение>?) 
  = hsl(<оттенок> <процент> <процент> [/<альфа-значение>]?) | hsl( <оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla( <оттенок> <процент> <процент> [ / <альфа-значение> ]? ) | hsla( <оттенок>, <процент>, <процент>, <альфа-значение>? )  
 
 где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> | <угол>

Примеры

Полное использование цвета рамки

HTML 
 <дел>
  
border-color: red; эквивалентно

  
  • border-top-color: красный;
    • 
    
  • правый цвет границы: красный;
    • 
    
  • border-bottom-color: красный;
    • 
    
  • border-left-color: красный;
    •
<дел>

border-color: gold red; эквивалентно

  • border-top-color: gold;
  • правый цвет границы: красный;
  • border-bottom-color: gold;
  • border-left-color: красный;
<дел>

border-color: красно-голубой золотой; эквивалентно

  • border-top-color: красный;
  • цвет правой границы: голубой;
  • border-bottom-color: gold;
  • цвет левой границы: голубой;
<дел>

border-color: красный, голубой, черный, золотой; эквивалентно

  • border-top-color: красный;
  • цвет правой границы: голубой;
  • border-bottom-color: черный;
  • border-left-color: gold;