Новые CSS уроки

CSS border или границы

Урок 16. CSS border или границы элементов

CSS атрибуты и значения, определяющие границы

Рассмотрим все свойства элемента border:

<head>
<title>CSS границы элементов страницы</title>
<style type="text/css">
.punktir {
width: 450px;
height: 280px;
border-top: 3px dashed Blue;
border-right: 10px double Red;
border-bottom: 3px solid DarkBlue;
border-left: 5px dotted DarkOrange
}
</style>
</head>
<body>
<div class="punktir"> &nbsp; </div>
</body>

Результат: CSS границы элементов

Рассмотрим строчку border-right:10px double Red. Первое значение устанавливает толщину границы в 10 пиксел, double определяет двойную сплошную линию в качестве границы, Red – цвет.



CSS border соединяет параметры:

Запись border:1px solid #000000 равносильна:

Строка border:1px solid #000000 может быть представлена таким образом:

Такой вариант менее рационален, так как требует больше времени на написание кода.

CSS border и примеры его свойств

border-bottom: 1px solid #00cc00

 

border-bottom: 3px dotted DarkOrange

 

border-bottom: 3px dashed Blue

 

border-bottom: 7px double Red

 

border-bottom: 8px groove Red

 

border-bottom: 8px ridge Red

 

border-bottom: 8px inset Red

 

border-bottom: 8px outset Red

 

Заметьте, что в последних пяти примерах установлен цвет Red.

При border:none видимая граница элемента отсутствует.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 15. CSS поле padding   CSS border или граница   Урок 17. CSS размер

    Сохранить в сервисы и закладки