CSS Kenar diğer adı ile Border özelliği; Bir kısmın (bu kutu paragraf ya da fotoğraf olabilir) sınırını belirlemek için ya da var olan sınırına özellikler vermek için kullanılır. Birden fazla özellik taşıyan Kenarları hep beraber inceliyeceğiz. CSS Kenar yani kodlamadaki ismi ile Border CSS dilinin çok önemli bir özelliğidir gerek web site oluştururken gerek te başka programlarda bu özelliği sürekli kullanacağız bu yüzden bu konuyu çok iyi anlamamız gerekmektedir.
1. CSS Kenar Stil Değerleri
CSS Kenar Stil Değerleri belirlediğimiz sınırlarda oluşacak kenarlığın tipini belirlemektedir. Tipi derken buna örnek olarak çizgilerin düz bir çizgi, noktalı, çift çizgi gibi özellikler gösterilebilir. Bu özelik için kullanacağımız kodlar 8 değer taşımaktadır. Gelin beraber inceliyelim.
- border-style: dotted; Kenarları noktalı bir biçimde gösterir.
- border-style: dashed; Kenarları kesikli bir biçimde gösterir.
- border-style: solid; Kenarları düz bir biçimde gösterir.
- border-style: double; Kenarları çift çizgi biçimde gösterir.
- border-style: groove; Kenarları oluk bir biçimde gösterir.
- border-style: ridge; Kenarları çıkıntılı bir biçimde gösterir.
- border-style: inset; Kenarları içe çekilmiş bir biçimde gösterir.
- border-style: outset; Kenarları dışa çıkık bir biçimde gösterir.
.y {
border-style: dotted;
}
.a {
border-style: dashed;
}
.z {
border-style: solid;
}
.i {
border-style: double;
}
.l {
border-style: groove;
}
.i {
border-style: ridge;
}
.m {
border-style: inset;
}
2. Kenar Genişliği
Kenar Genişliği denilince isminden de anlaşılacağı üzere hepimizin aklına kenarların kalınlığı gelmektedir. Bir kutuya verilen bir kenarlığın kalınlığını belirlemek için “border-width” özelliği kullanılmalıdır. Unutmayınız ki bu özellik tek başına çalışmamaktadır. Bu özellikle beraber “border-style” özelliği de belirlenmiş olmalı.
.y {
border-style: dotted;
border-width: 10px;
}
.a {
border-style: dashed;
border-width: 11px;
}
.z {
border-style: solid;
border-width: 12px;
}
.i {
border-style: double;
border-width: 13px;
}
.l {
border-style: groove;
border-width: 14px;
}
.i {
border-style: ridge;
border-width: 15px;
}
.m {
border-style: inset;
border-width: 16px;
}
3. Kenar Rengi
Kenar belirleyip te kenara bir renk vermemek olmaz tabi kenarların daha şık durması için bu özellik kullanılmakta. Bu özelliği “border-color” ile kullanmaktayız. Renkleri belirlerken üç farklı şekilde belirleyebiliyoruz.
- 1. Renk Adı (Red)
- 2. RGB değeri ( rgb (255,0,0) )
- 3. Hex değeri (#ff0000)
.y {
border-style: dotted;
border-width: 10px;
border-color: red;
}
.a {
border-style: dashed;
border-width: 11px;
border-color: #0254fd;
}
.z {
border-style: solid;
border-width: 12px;
border-color: blue;
}
.i {
border-style: double;
border-width: 13px;
}
.l {
border-style: groove;
border-width: 14px;
border-color: rgb(255.8.6);
}
.i {
border-style: ridge;
border-width: 15px;
border-color: #666666;
}
.m {
border-style: inset;
border-width: 16px;
border-color: rgb(255.0.0);
}