Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними " коллегами по цеху" список которых приведён ниже:

border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.

· border-bottom-color - Устанавливает цвет нижней границы элемента.

· border-bottom-style - Определяет стиль нижней границы элемента.

· border-bottom-width - Определяет ширину нижней границы элемента.

border-left - Определяет стиль, цвет и ширину левой границы элемента.

· border-left-color - Устанавливает цвет левой границы элемента.

· border-left-style - Определяет стиль левой границы элемента.

· border-left-width - Определяет ширину левой границы элемента.

border-right - Определяет стиль, цвет и ширину правой границы элемента.

· border-right-color - Устанавливает цвет правой границы элемента.

· border-right-style - Определяет стиль правой границы элемента.

· border-right-width - Определяет ширину правой границы элемента.

border-top - Определяет стиль, цвет и ширину верхней границы элемента.

· border-top-color - Устанавливает цвет верхней границы элемента.

· border-top-style - Определяет стиль верхней границы элемента.

· border-top-width - Определяет ширину верхней границы элемента.

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

Приведу пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Граница слева< /title>
< style type=" text/css" >
div{
border-left: 10px solid #008000;
background: #c6f2de;
}
< /style>
< /head>
< body>
< div>
< p> В этом примере у контейнера div мы обозначили только его левую границу с помощью свойства border-left написав: < /p>
div{< br>
border-left: 10px solid #008000; < br>
background: #c6f2de; < br>
}
< p> Такого же результата можно было бы добиться прописывая свойства стиля, толщины и цвета для левой границы элемента отдельно.< /p>
< p> Это выглядело бы вот так: < /p>
div{< br>
border-left-color: #008000; < br>
border-left-style: solid; < br>
border-left-width: 10px; < br>
background: #c6f2de; < br>
}
< p> Кстати Вам этот блок ничего не напоминает?:)< /p>
< /div>
< /body>
< /html>

Border

Свойство border - базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.

Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> border< /title>
< style type=" text/css" >
div{
border: RGB(25, 125, 25) 6px ridge;
}
< /style>
< /head>
< body>
< div>
< h3> А знаете ли Вы что: < /h3>
< p> Слон - символ положительного характера - используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.< /p>
.........
< /div>
< /body>
< /html>

Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только одной из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.