Рамки с помощью CSS (border)

Рамки с помощью CSS (border)

Когда необходимо задать рамку для элемента на сайте, можно сделать это с помощью border. Различные стили рамки подойдут как для галереи, так и для того, что бы выделить определенный элемент на сайте.

Пример

Border style: Solid
Border style: Dotted
Border style: Dashed
Border style: Double
Border style: Groove
Border style: Ridge
Border style: Inset
Border style: Outset

HTML



<div class="border-style-solid">Border style: Solid</div>
<div class="border-style-dotted">Border style: Dotted</div> 
<div class="border-style-dashed">Border style: Dashed</div> 
<div class="border-style-double">Border style: Double</div>
<div class="border-style-groove">Border style: Groove</div>
<div class="border-style-ridge">Border style: Ridge</div>
<div class="border-style-inset">Border style: Inset</div>
<div class="border-style-outset">Border style: Outset</div>

CSS


.border-style-solid{
	border: 5px solid #f66d52; /* Толщина, стильи цвет рамки */
	padding: 5px; /* Отсступ от рамки */
}
.border-style-dotted{
	border: 5px dotted #f66d52;
	padding: 5px;
}
.border-style-dashed{
	border: 5px dashed #f66d52;
	padding: 5px;
}
.border-style-double{
	border: 8px double #f66d52;
	padding: 5px;
}
.border-style-groove{
	border: 8px groove #f66d52;
	padding: 5px;
}
.border-style-ridge{
	border: 8px ridge #f66d52;
	padding: 5px;
}
.border-style-inset{
	border: 8px inset #f66d52;
	padding: 5px;
}
.border-style-outset{
	border: 8px outset #f66d52;
	padding: 5px;
}
By julia