Описание видов css-границ

В данной статье будут рассмотрены основные виды бордеров (border) aka границ в css и дополнительные команды с которыми в основном они используются.

Для тех, кто не знает, что это и с чем его едят, объясняю вкратце: это рамки, которые можно применять к таблицам, параграфам, div`ам и т.д. Они значительно облегчают работу с дизайном сайта и решают проблемы использования чрезмерного объема графики заменой на css.

В css-коде бордеры прописываются так:

.вашеимястиля{border: «размер в пикселях» «тип бордера»}

или (далее будет без именистиля)

{border: «размер в пикселях» «тип бордера» «цвет»}

Пример: {border: 5px solid #999999}

Виды бордеров:

Можно делать отступы бордеров относительно других объектов, в этом случае дополнительно добавляется:
margin – внешний отступ.
padding – внутренний отступ.

Пример:
{
border:2px solid ;
padding:5px
}
– Граница толщиной в два пикселя и отступом со всех внутренних краев по пять пикселей. «;» - в css-коде, как бы запятая, если применяются отдельные команды. padding и margin – отдельные команды.

Бордеры и отступы можно задавать и для различных сторон и добавлять им цвета:
{border-top: 2px solid #999999} – отобразится только верхний сплошной бордер шириной 2 пикселя и цветом #999999.

Так же есть:
-left - слева.
-right - справа
-bottom - снизу

Пример с левым внешним отступом в 5px, верхней границей 2px сплошной и нижней границе 3px точкой :
{
border-top: 2px solid;
border-bottom: 3px dotted;
margin-left: 5px
}

Еще один вариант позиционирования margin или padding отступов:
вид отступа: 5px 5px 5px 5px; описывает верхний, правый, нижний, левый внешние отступы.
вид отступа: 5px 5px 5px; описывает верхний, левый и правый, нижний отступы.
вид отступа: 5px 5px; описывает верхний и нижний и правый и левый отступы.
вид отступа: 5px; все внешние отступы по 5px.

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