CSS: свойство border-color

Очередная статья про свойства тэгов css. Штука важная – сейчас большинство сайтов оформляется именно с помощью средств css, и знание может помочь сделать сайт красивым. Как говориться, кто на что учился – для красивых юношей существует модельное агенство мужчины, а для умных – интернет, где можно заработать и не имея особой красоты.

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

Примеры:

td {border-color: yellow;}

td {border-color: #03C red;}

td {border-color: rgb(15, 216, 16) #39C;}

td {border-color: rgb(90%, 15%, 20%) rgb(15, 216, 16) olive #F0F;}

В данном примере задается цвет рамки для таблицы, при этом используется тэг style в таком виде: <table border=»2″ style=»border-color: green»>

yellow

 

#03C red

 

rgb(15, 216, 16) #39C

 

rgb(90%, 15%, 20%) rgb(15, 216, 16) olive #F0F»

Как видно в примере цвет задается разными способами.

CSS: примеры различных значений border-color и их комбинации

Возможные значения border-color:

цвет — цвет рамки, или цвета сторон рамки. Указываются одним из стандартных для CSS способом;

transparent – прозрачная рамка;

inherit — перенять значение у родительского элемента.

Также можно указывать два, три или четыре значения цвета через пробел. В том случае, если указанно 1 значение, то оно применяется по отношению ко всей рамке. Если их 2, то верхней и нижней рамке будет соответствовать первое значение, а левой и правой — второе. При указании 3-х значений — верхней рамке присваивается первое из них, левой и правой — второе, а нижней – третье значение. При указании 4-х значений цвета, они последовательно присваиваются верхней, правой, нижней и левой рамкам.

Значение border-color по умолчанию (если оно не указано) зависит от браузера, с которым работает пользователь, как правило, это черный или серый цвет того или иного оттенка.

Значения border-color ко всем элементам, но не наследуются для элементов, находящихся ниже по иерархии.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *