CSS Outline Kullanımı

CSS outline özelliği dış çizgi için renk, genişlik gibi özellikleri belirler.

outline denen dış çizgi border yani sınırın dışında tüm elementi saran bir çizgidir.

outline özelliği border özelliğinden farklıdır. outline özelliği elementin genişliğinin ve yüksekliğinin bir parçacı değildir.

outline belirlediğinizde elementin genişliği ve yüksekliği değişmez.

Örnekte siyah çizgi border, hemen onun dışındaki kesik mavi çizgi outline tarafından çizilmiştir.

div {
  height:100px;
  background-color:#4CAF50;
  border:5px solid #000; 
  color:#fff;
  outline:4px dashed #0069FC; 
  width:50%; 
  text-align:center; 
  padding:25px
}

CSS outline-style Özelliği

outline-style özelliği ile çizginin şekli belirlenir.

outline-style şu değerlere sahip olabilir:

• dotted - Noktalı çizgi tanımlar
• dashed - Kesik çizgilerden oluşan çizgi tanımlar
• solid - Düz çizgi tanımlar
• double - Çift çizgi tanımlar
• groove - 3 boyutlu oluklu çizgi. Bu efekt outline rengine göre ortaya çıkar.
• ridge - Çıkıntılı çizgi. Bu efekt outline rengine göre ortaya çıkar.
• inset - İçe doğru 3 boyutlu görünen çizgi. Bu efekt outline rengine göre ortaya çıkar.
• outset - Dışa doğru 3 boyutlu çizgi. Bu efekt outline rengine göre ortaya çıkar.
• none - Dış çizgisi yok
• hidden - Gizli dış çizgisi tanımlar

Aşağıda farklı stillerde outline - dış çizgi örneklerini bulabilirsiniz:

p {
    border: 1px solid black;
    outline-color: #0069FC;
}

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;}

Bu kodun çıktısı şu şekilde olacaktır:

CSS outline-color Özelliği

outline-color özelliği dış çizginin rengini belirler.

Renk aşağıdaki değerlerden biri ile tanımlanır:

• Renk adı kullanılarak (background-color:red)
• RGB değer vererek (background-color:rgb(255,0,0))
• Hex değer vererek (background-color:#ff0000)

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: #9900CC;
}

CSS outline-width Özelliği

outline-width özelliği dış çizginin kalınlığını belirler.

Bu değer px, cm,pt, em gibi birimler ile verilir.

Aynı zamanda thin (ince), medium(orta) ve thick(kalın)  gibi ön tanımlı genişlikler de kullanılabilir.

p.bir {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.iki {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

CSS outline Özelliğinin Kısa Yazımı

Yukarıda bahsedilen tüm özellikler tek bit satırda kısa olarak yazılabilir.

Sadece outline özelliği ile dış çizginin kalınlık, renk ve biçimi belirlenebilir.

div { 
  outline:4px dashed #0069FC;  
}

Kısa yazım outline outline:genişlik still renk şeklindedir: outline: 10px solid red