CSS Border özelliğinden sonra ufak bir bilgi daha vermek istiyorum.. Bu aşamada, CSS içerisinde aslında border gibi kullanabileceğimiz bir örnek daha mevcut ki buna da outline diyoruz.

Outline özelliği içerisinde; border‘da kullandığımız gibi, style, color ve width ayarlarını kullanarabiliriz.Örnek;

p
{
border:1px solid red;
outline:green dotted thick;
}

Burada, p taginin etrafında bir çerçeve varken üzerine ir de yeşil noktalı dış çizgiler yerleştirdik.Şimdi p taginin içerisinde değişkenler sınıfı oluşturup hepsine ayrı dış çizgi atayalım;

p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}

Gördüğünüz üzere ilk örnekteki gibi direk outline özelliklerini girebildiğimiz gibi outline-style ile de stil değişkenleri atayabiliyoruz. Şimdi tüm outline özelliğinin açıklamaları ile birlikte değerlerinin bulunduğu bir tablo oluşturalım;

Bütün CSS outline Özellikleri