CSS Dış Kenarlık (Outline)

İstiyorsak kenarlığın dışında bir kenar daha çizebiliriz. Bunun için outline komutunu kullanıyoruz. Üç özelliği var:

  • outline-style
  • outline-width
  • outline-color
Dıştan Boşluk (Margin)
Dış Kenarlık (Outline)
Kenarlık (Border)
İçten Boşluk (Padding)
İçerik (Content)

Yukarıda content içeriğin bulunduğu kısımdır. İçerik ile kenarlık arasında verdiğimiz boşluk padding, kenarlığın dışında ikincil bir kenarlık olarak verdiğimiz outline, dış kenarlıktan sonra vereceğimiz boşluk ise margin olarak adlandırılır.

outline-style: Kenarlık Stili

Normal borderda kullanabildiğimiz stillerin aynısını burda da kullanabiliriz:
none – Kenarlık yok
dotted – Noktalı
dashed – Kesik çizgili
solid – Çizgi
double – Çift çizgi
groove
ridge
inset
outset

Örnek Bir Kullanım

 .kutu { 
outline-style:dotted;
outline-color:#00ff00;
 }

outline-width: Kenarlık Boyutu

Piksel olarak dış kenarlık boyutunu belirtmemizi sağlar.

Örnek Kullanım

 .kutu { 
    outline-style:dotted;
    outline-width:3px;
 }

outline-color: Kenarlık Rengi

Kenarlığın rengini belirlememizi sağlar.

Örnek Kullanım

 .kutu { 
    outline-style:dotted;
    outline-color:#00ff00;
 }

Kenar Belirtmenin Kısa Yolu

Sadece outline kullanarak da outline-width, outline-color ve outline-style değerlerini belirtmemiz mümkün.

Örnek Kullanım

 .kutu { outline: 3px dotted red; }