Создаем границы с помощью CSS

Использование CSS для границ не должно ограничиваться стандартными border:1px solid #000; Ниже я приведу более сложные случаи создания границ.

Вертикальное и горизонтальное закругление углов

Углы также можно закруглять только по горизонтали или по вертикали. Для этого используется 2 значения, разделенные ‘/’:

[codesyntax lang=»css» title=»CSS»]

img {
	border-radius: 50% / 15% /* горизонтальный радиус / вертикальный радиус */;
}

[/codesyntax]

Результат будет таким:

Эти же стили можно записать и так:

[codesyntax lang=»CSS» title=»CSS»]

img{
	border-top-left-radius: 15% 50%;
	border-top-right-radius: 15% 50%;
	border-bottom-right-radius: 15% 50%;
	border-bottom-left-radius: 15% 50%;
}

[/codesyntax]

Если таким образом менять только одну пару противоположных углов, то можно получить эффект деформации.

Двойная граница с помощью outline

Для создания двойной границы можно использовать css-свойство outline:

[codesyntax lang=»css» title=»CSS»]

img {
   border: 10px solid #f00;
   outline: 10px solid #0f0;
}

[/codesyntax]

Создание границ с помощью псевдоэлементов

[codesyntax lang=»css» title=»CSS»]

.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;
  border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}
.box:before {
  border: 10px solid blue;
}

[/codesyntax]

В таком способе максимум — 4 границы. Если вам нужно больше границ, то используйте следующий способ.

Создание границ с помощью теней

Для создания множества границ для одного блока можно использовать css-свойство box-shadow:

[codesyntax lang=»css» title=»CSS»]

.box {
    border: 5px solid red;
     box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

[/codesyntax]

На мой взгляд это наиболее предпочтительный способ создания нескольких границ, если конечно вы не верстаете под старые браузеры (там все решается вложенными элементами).

Источник:  net.tutsplus.com