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-top
border-right
border-bottom
border-left

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

border-top:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000

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

border-width:1px;
border-style:solid;
border-color:#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 | Обновление: Ноябрь 2018

CSS padding CSS border или граница элемента CSS размеры