Css Border (Kenarlık)

Arkadaşlar css ile sitemizdeki örneğin bir resime bir bloğa bir yazıya vb şeylere değişik kenarlıklar verebiliriz.Bunu rengini , boytunu , stilini değiştirebildiğiniz bir çerçeve gibi düşünün işte bunun etrafındaki o çerçeveye css dilinde border denmekte.Sekik adet border stilimiz var.Bunlar ; dotted , dashed , solid , double , grove , ridge , inset ve outset arkadaşlar.Benim pek sevediğim bi özelliktir kendi başına kullanıldığında hoş görüntü vermez o yüzden pek haz etmem.Gelin beraber örneklerle nasıl yapıldıklarını neye benzediklerini görelim.

Html Kodları :

<div class="dotted">Dotted Stili</div>
<br>
<div class="dashed">Dashed Stili</div>
<br>
<div class="solid">Solid Stili</div>
<br>
<div class="double">Double Stili</div>
<br>
<div class="groove">Groove Stili</div>
<br>
<div class="ridge">Ridge Stili</div>
<br>
<div class="inset">İnset Stili</div>
<br>
<div class="outset">Outset Stili</div>

Css Kodları : 

body {
background-color:#325780;
}
.dotted {
 background-color:#FFFFFF;
 border:5px dotted #FF8C00;
}
.dashed {
 background-color:#FFFFFF;
 border:5px dashed #FF8C00;
}
.solid {
 background-color:#FFFFFF;
 border:5px solid #FF8C00;
}
.double {
 background-color:#FFFFFF;
 border:5px double #FF8C00;
}
.groove {
 background-color:#FFFFFF;
 border:5px groove #FF8C00;
}
.ridge {
 background-color:#FFFFFF;
 border:5px ridge #FF8C00;
}
.inset {
 background-color:#FFFFFF;
 border:5px inset #FF8C00;
}
.outset {
 background-color:#FFFFFF;
 border:5px outset #FF8C00;
}

Uygulamalı Görünüm :

Kolay gelsin.