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

CSS свойства

Определение и применение

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

Всегда объявляйте свойства стиля границ до того, как вы задаёте для них цвет - элемент должен иметь границы, прежде чем вы зададите цвет.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
border-top-color1.01.03.51.04.012.0

Internet Explorer 6 (и более ранние версии) не поддерживает значение свойства "transparent".

CSS синтаксис:

border-top-color:"color | transparent | initial | inherit";

JavaScript синтаксис:

object.style.borderTopColor = "red"

Значения свойства

ЗначениеОписание
colorЗадает цвет верхней границы. По умолчанию - цвет элемента
transparentУказывает, что цвет границы должен быть прозрачным. IE6 (и более ранние версии) не поддерживает данное значение.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Цвет границ.</title>
<style> 
.primer {
border :10px solid; /* задаём сплошную границу шириной 10px для всех сторон */
border-bottom-color :rgb(255,0,0); /* задаём цвет для нижней границы */
border-left-color :#00FF00; /* задаём красный цвет для левой границы */
border-right-color :yellow; /* задаём жёлтый цвет для правой границы */
border-top-color :hsl(240,100%,50%); /* задаём синий цвет для верхней границы */
text-align:center; /* задаём выравнивание текста по центру */
width:150px; /* задаём ширину блока */
}
</style>
</head>
	<body>
		<p class = "primer">Пример указания цвета для границ</p>
	</body>
</html>
Пример указания цвета для границ.
Пример указания цвета для границ.
CSS свойства
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.