CSS ile çoklu kenar(border) çizgisi nasıl yapılır?

CSS ile birden fazla kenar(border) çizgisi resim kullanmadan nasıl yapılır?

CSS ile çoklu kenar(border) çizgisi yapabilir miyiz?

CSS ile farklı renklerle kenar(border) çizgileri yapılabilir mi?

CSS ile çoklu kenar(border) çizgisi resim kullanmadan CSS ile basit bikaç şekilde yapılabilmektedir. İlk olarak before sözde sınıfını kullanarak birden fazla kenar(border) çizgisi oluşturalım. Bu yöntem ile çoklu kenar çizgisi uygulanacak eleman relative konumlandırılmalı ve padding değeri uygulanacak ikinci kenar çizgisi dikkate alınarak atanmalıdır.

Bu yöntemi bir örnek göstermek gerekirse;

.CokluKenarCizgisi {
    border: 5px solid #F4E337;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.CokluKenarCizgisi:before {
    position: absolute;
    border: 5px solid #0000FF;
    content: "";
    display: block;
    bottom: 0;
    left: 0;   
    right: 0;
    top: 0;
    z-index: -1;
}

<div class="CokluKenarCizgisi">uzmanım.net</div>

before sözde sınıfı ile ikinci kenar(border) çizgisini ekledik.  bu örneğimizde sadece iki kenar(border) çizgisi için kod verdik istersek before, background-color ve after kullanarakta daha fazla kenar çizgisi uygulabiliriz.

CSS ile iki kenar(border) çizgisi yapmak için diğer bir yöntem olan outline kullanarakta bu işlemi yapabiliriz.

outline ile iki kenar çizgisi oluşturmak

.OutlineKenarCizgisi{
    border: 5px solid #0000FF;
    outline: 5px solid #F4E337;
    padding: 20px;
}

<div class="OutlineKenarCizgisi">uzmanım.net</div>

Bu yöntemle ikiden fazla kenar(border) çigisi kullanamasakta iyi bir alternatif ihtiyacımız olan yerler kullanabiliriz.

Diğer bir yöntem ise box-shadow ile çoklu kenar çizgisi oluşturma yöntemidir.

box-shadow ile çoklu kenar çizgisi oluşturmak

.TextShadowKenarCizgisi{
    border: 5px solid #00FF00;
    padding: 10px;
    moz-box-shadow: 0 0 0 5px #0000FF, 0 0 0 10px #FFFF00;
    webkit-box-shadow: 0 0 0 5px #0000FF, 0 0 0 10px #FFFF00;
    box-shadow: 0 0 0 5px #0000FF, 0 0 0 10px #FFFF00;
}

<div class="TextShadowKenarCizgisi">uzmanım.net</div>

Bu örneğimizde 3 farklı renkte kenar(border) çizgisi kullandık bu sayısı arttırabiliriz. Bu yöntemin tek dezavantajı ise İE9 ve üzeri versiyonları desteklemektedir.