CSS Kenarlıklar
Dolguları, fotoğrafları, gradyanları ve yumuşak solmayı biliyorsunuz. Sıradaki beceri: kutunun kenarını çizmek. Kenarlık (border), öğeyi çerçeveleyen çizgidir — kartlar, düğmeler, alanlar ve paneller ona yaslanır.
Kenarlık nedir?
CSS kenarlığı, öğe kutusunun kenarında oturur. Üç parçası vardır: kalınlık (genişlik), stil (görünüm — düz, kesikli vb.) ve renk. Stili unutursanız kalınlık olsa bile çoğu zaman işe yarar bir çizgi görmezsiniz.
Üç parça
Her kenarlığı kısa bir tarif gibi düşünün: kalınlık + görünüm + boya.
Uzun yazım: kalınlık, stil, renk
css.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}Stil neden önemli?
Yalnızca border-width yetmez. Başlangıç değeri none dışında bir border-style olmadan genelde çizgi görünmez. Önce solid ile başlayın; sonra diğer stillere geçin.
Kısayol: üç yerine bir satır
border kısayolu kalınlık, stil ve rengi bir araya getirir. Günlük yaygın sıra: kalınlık → stil → renk.
border kısayolu
css.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}Yaygın kenarlık stilleri
Stil, çizginin kişiliğidir. Önce küçük bir günlük set ezberleyin.
📊 Yaygın border-style değerleri
| Anahtar | Görünüm | Günlük kullanım |
|---|---|---|
solid |
Sürekli çizgi | Kartlar, düğmeler, form alanları |
dashed |
Kısa tireler | Yer tutucular, bırakma bölgeleri |
dotted |
Noktalar | Yumuşak ayırıcılar, hafif çerçeveler |
double |
İki paralel çizgi | Dekoratif vurgu (seyrek) |
none |
Kenarlık çizilmez | Sıfırlama / kenarı kaldırma |
hidden |
Tablo kenarlığı birleşmesinde none gibi | Tablolar sonra — adı bilin |
Birkaç stil yan yana
Aynı kalınlık ve renk; yalnızca stil değişir.
solid, dashed, dotted, double
css.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }Bir kenar bir seferde
Üst, sağ, alt ve solu ayrı stilleyebilirsiniz — alt çizgi, sol vurgu çubuğu veya asimetrik kartlar için yararlıdır.
Kenar kenar kenarlık
css.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}Tek kenar kısayolu
border-left: 4px solid #0f766e günlük yoldur: bir kenarı ayarlayın, diğerlerine dokunmayın.
Günlük kart alışkanlığı
İnce kenarlık + iç boşluk + yumuşak dolgu, bağırmaz; net bir kart gibi okunur.
Basit kenarlıklı kart
css.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* yuvarlama sonraki ders — burada köşeler kare kalsın */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}Kenarlığı kaldırmak
Temizlemek için border: none (veya border-style: none) tercih edin. Yalnızca border-color: transparent bazen kalınlık bırakır — none temiz sıfırlamadır.
border none ile sıfırlama
css.plain {
border: none;
}Kendiniz deneyin
border-width,border-style: solidve turkuazborder-colorile kart.- Aynı görünümü
border: 2px solid #0f766eile yazın. - Dört kutu: aynı kalınlıkta solid, dashed, dotted ve double.
- Yalnızca kalın sol kenarlıklı alıntı bloğu.
- Kenarlıklı bir düğmeden başlayıp
border: noneile kenarı kaldırın.
Yaygın hatalar
- Kalınlık ve renk koyup
border-styleunutmak (hiçbir şey görünmez) - border (çizilen kenar) ile margin (dış boşluk) karıştırmak — farklı araçlar
- Yalnızca
borderile yuvarlak köşe beklemek — oborder-radius(sonraki ders) - Her kenarı gereksizce bağıran renklerle boyamak
border: noneisterken kalın şeffaf kenarlık bırakmak
Özet
- Kenarlık kalınlık, stil ve renk ister
border: 2px solid #0f766egünlük kısayoldur- Önce
solid,dashed,dotted,doublevenoneöğrenin - Tasarım isterse kenarları ayrı stillendirin
border: noneile temiz sıfırlayın- Şimdilik köşeler kare — yuvarlama sonraki derste
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek