border и outline

CSS рамку можно реализовать с помощью двух свойств border и outline.

border CSS

border: толщина стиль цвет;

border: border-width border-style border-color;

border: 1px solid red;

border: 1px dotted red;

border: 1px dashed red;

border: 3px double red;

border: 3px groove red;

border: 3px ridge red;

border: 2px inset red;

border: 2px outset red;

border: none;

Три записи равнозначны:

border: 3px solid black;

или

border-width: 3px; /* по умолчанию 3 или 4px в зависимости от браузера  */ 
border-style: solid; /* по умолчанию none  */ 
border-color: black; /* по умолчанию зависит от индивидуальных свойств  */ 

или

border: solid;

Для каждой стороны существует своё свойство

border-top



border-bottom

Две записи равнозначны

border-top: 2px dotted blue; 
border-right: 4px ridge chocolate; 
border-bottom: 6px dashed blue; 
border-left: 8px ridge chocolate;

или

border-width: 2px 4px 6px 8px; /* начиная сверху по часовой */ 
border-style: dotted ridge dashed; /* верхняя сторона, вертикальные, нижняя */
border-color: blue chocolate; /* для горизонтальных сторон, для вертикальных */

Стоит сказать и о свойстве border-radius, которое позволяет сделать закруглённые углы.

outline CSS

outline: outline-width outline-style outline-color;

outline: 1px solid red;

outline: 1px dotted red;

outline: 1px dashed red;

outline: 3px double red;

outline: 3px groove red;

outline: 3px ridge red;

outline: 2px inset red;

outline: 2px outset red;

outline: none;

Три записи равнозначны:

outline: 3px solid black;

или

outline-width: 3px; /* по умолчанию 3px */ 
outline-style: solid; /* по умолчанию none  */ 
outline-color: black; /* по умолчанию зависит от индивидуальных свойств  */ 

или

outline: solid;

Нельзя задать отдельно для каждой стороны, но присутствует свойство outline-offset, которое смещает контур от края элемента. Наведите и нажмите на пример ниже.

<style type="text/css">
.kontur {outline: 1px solid red;}
.kontur:hover {outline-offset: 10px;}
.kontur:active {outline-offset: -5px;}
</style>

<div class="kontur">содержание</div>

Для того, чтобы убрать пунктирную рамку при активации ссылки в IE. Пример HTML.

<a href="http://shpargalkablog.ru/2011/06/css-box-shadow.html" style="outline: none;">Пример HTML</a>

Как рассчитывается ширина элемента HTML. В чём разница между border и outline

    margin: 30px;     padding: 15px;     width: 100px;
    outline-width: 10px; или border-width: 10px;

содержимое

Ширина = 60 margin + 30 padding + 100 width.

содержимое

Ширина = 60 margin (40 + 20 outline) + 30 padding + 100 width.

содержимое

Ширина = 60 margin + 20 border + 30 padding + 100 width.

margin, padding, outline, border при расчётах ширины нужно удвоить, поскольку учитываются и левая, и правая стороны. Поочерёдно наведите курсор на две ссылки в предыдущем предложении. Другой пример почему происходит смещение в div

width: 500px;

width: 250px;

width: 250px;

width: 500px;

width: 250px;

width: 250px;
border: solid;

Внеся box-sizing: border-box; border не будет увеличивать ширину и высоту блока

width: 500px;

width: 250px;

width: 250px;
border: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Также как и padding, его нужно учитывать в height и width

width: 500px;

width: 250px;

width: 250px;
border: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;

Как сделать рамку из нескольких цветов HTML

содержимое

<style type="text/css">
.ramkacvet {
  width: 30%; 
  margin: 30px auto;
  background: white content-box; /* родительский фон за счёт padding */ 
  padding: 5px;
  border: solid 5px yellow;
  box-shadow: 0 0 0 5px pink; /* тень блока HTML */ 
  outline: 5px solid green; /* в IE подменяет box-shadow */ 
  position: relative;
}

.ramkacvet:after {
  border: solid 5px blue;
  position: absolute;
  content: "";
  top: -15px; 
  right: -15px; 
  bottom: -15px; 
  left: -15px; 
}

.ramkacvet:before { /* :before CSS */ 
  border: solid 5px red;
  position: absolute;
  content: "";
  top: -20px; 
  right: -20px; 
  bottom: -20px; 
  left: -20px; 
}
</style>

<div class="ramkacvet">содержимое</div>

http://shpargalkablog.ru/2013/01/skachet-menu.html