На этой странице

CSS Цвет линии рамки

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

Если есть только одно значение компонента, оно применяется ко всем сторонам.

p {
    border-style: solid;
    border-color: green; /* применяется ко всем сторонам */
   }

Если есть два значения, верхнее и нижнее устанавливаются на первое значение, а правое и левое - на второе.

p {
    border-style: solid;
    border-color: green red; /* верхнее и нижнее устанавливаются на первое значение,
	а правое и левое - на второе. */
   }

Если есть три значения, верхнее значение устанавливается на первое значение, левое и правое - на второе, а нижнее - на третье.

p {
    border-style: solid;
    border-color: green red black; /* верхнее значение устанавливается на первое значение, левое и правое - на второе,
	а нижнее - на третье. */
   }

Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому соответственно.

p {
    border-style: solid;
    border-color: green red black blue; /*применяются к верхнему, правому, нижнему и левому. */
   }

Пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Цвет линии рамки: Свойство border-color</title>
    <style type="text/css">
    @media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h1 { 
   color: blue; 
}
p  {
   font-size:14pt;
   width: 300px;}
.div {
   padding: 10px;
   border-style: solid;      
   border-top-color: green;    
   border-right-color: #CCCCCC;
   border-bottom-color: black; 
   border-left-color: red; 
}
.div1 {
   padding: 10px;
   border-style: solid;       
   border-top-width: 0;       
   border-right-width: thick;
   border-bottom-width: thin;
   border-left-width: medium
}
.div2 {
   padding: 10px;
   border-style: solid;       
   border-color: blue;       
}
</style>
  </head>
  <body>
   <h1>Цвет линии рамки: Свойство border-color</h1>
   <p class="div">Свойство border-color – Цвет линии рамки.</p>
   <p class="div1">Свойство border-color – Цвет линии рамки.</p>
   </body>
</html>

Открыть пример в новом окне

Цвет линии рамки

Рекомендуемые материалы

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