CSS kenar çizgileri kullanımı bir çoğumuz için çok basit bir iştir. Ancak yanına bir çizgi daha konduğu zaman kara kara düşünürüz ne yapalımda bu işin altında kalkalım diye. Resim kullanırız genelde sorunu halletmek için.

Burada basit bir yol ile bu işi nasıl yapacağımızı anlatacağım.

Çoklu kenar çizgisi uygulanacak eleman relative konumlandırılmalı ve padding değeri uygulanacak ikinci kenar çizgisi dikkate alınarak atanmalıdır.

#cokluKenarCizgisi{
	border: 5px solid #FF0000;
	padding: 20px;
	position: relative;
	z-index: 10;
}

Sözde elemanlar ile ikinci kenar çizgisini ekleyelim. z-index eksi değer vererek içeriğin arkasına atarız.

 #cokluKenarCizgisi:before{
	border: 5px solid #06F;
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

Bu örnekte sadece iki kenar çizgisi için kod verildi, ancak yine sadece :before ve background-color ile üç kenar çizgisi ve hatta :before, background-color ve :after ile 4 ve daha fazla kenar çizgisi ekleyebiliyoruz.

Tek kenara çoklu çizgi genelde lazım olan bir kod olduğu için burada onuda paylaşıyorum.

#cokluKenarCizgisi{
	background: #F0F0F0;
	border-bottom: 2px solid #f00;
	color: #000000;
	padding: 10px 10px 11px;
	position: relative;
}

#cokluKenarCizgisi:before{
	background: #0FF;
	bottom: 0;
	content: "";
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
}

Daha falza örnek için http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html sayfasına bakınız.

Tarayıcı Desteği

Chrome explorer Firefox
4.0+ (-webkit) 8+ 3.5+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ (-webkit) 3.2+ (-webkit) 36+

Burada önemli nokta ie7’nin :before ve :after desteğinin olmaması. Kullanım yüzdesi %6,46 olduğu göz önüne alınırsa göz ardı edilebilir. border-radius uygulanmış elemanlara bu metot kullanılabilir.

outline ile iki kenar çizgisi oluşturmak

İki kenar çizgisi oluşturmak için outline kullanılabilir.

#cokluKenarCizgisi{
	border: 5px solid #FF0000;
	outline: 5px solid blue;
	padding: 20px;
}

İkiden fazla kenar çigisi kullanamasakta iyi bir alternatif olarak kullanılabilir.

Tarayıcı Desteği

Chrome explorer Firefox
4.0+ (-webkit) 8+ 3.5+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ (-webkit) 3.2+ (-webkit) 36+

ie7 yine sorun

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

#cokluKenarCizgisi{
	border: 5px solid #FF0000;
	padding: 10px;
	moz-box-shadow: 0 0 0 5px #06F;
	webkit-box-shadow: 0 0 0 5px #06F;
	box-shadow: 0 0 0 5px #06F;
}

Çoklu gölge kullanımı ile birdne fazla kenar çizgiside ekleyebiliriz.

#cokluKenarCizgisi{
	border: 5px solid #FF0000;
	padding: 10px;
	moz-box-shadow: 0 0 0 5px #06F, 0 0 0 10px #FF0;
	webkit-box-shadow: 0 0 0 5px #06F, 0 0 0 10px #FF0;
	box-shadow: 0 0 0 5px #06F, 0 0 0 10px #FF0;
}

Tarayıcı Desteği

Chrome explorer Firefox
4.0+ (-webkit) 9+ 3.5+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ (-webkit) 3.2+ (-webkit) 36+

Burada destek konusundn daha büyük bir sorunumuz var ie7’in yanında box-shadow özelliğini ie8’de desteklemiyor.

Sonuç

Çoklu kenar çizgisi uygulamada yukarıda anlattığımız yöntemler çözüm olarak eterli bence. ancak ie6 ve ie7 desteği için ne yapacağız diye düşünüyorsanız eski fazladan katman ekleme ile veya resim kullanrak çözme yoluna gidilebilir. Benim düşünceme göre ie7 gözden çıkarılabilir ve :before veya outline yöntemi kullanılabilir.

Kalın sağlıcakla

Kaynaklar

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.