CSS Dersleri Bölüm 10 – Border / Çerçeve – kenar
CSS Border Özelliği
CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.
Border Style
border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.
Not; border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!
border-style değerleri:
none: Çerçevesiz hal
dotted: Noktalı bir çerçeve
dashed: Tirelenmiş kenarlık
solid: Sade, tek renk ve tek çizgi halinde olan kenarlık
double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.
groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.
ridge:3D kabarık çizgi. border-color değerine bağlı.
inset: 3d ilave kenar. border-color değerine bağlı.
outset: 3d ilave kenar. border-color değerine bağlı.
Kendiniz deneyin: Kenarın değerini ayarlama
Kenar genişliği
border-width kenarların genişliğini ayarlamak için kullanılır.
Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.
Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.
Örnek
|
Kenar rengi
border-color kenarlara renk vermek için kullanılır. Renkler de:
- name -belirli bir renk adı ile,mesela “red”
- RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
- Hex – belirli bir hex değeri ile,mesela “#ff0000”
Kenar renklerini transparan/”transparent” da yapabilirsiniz.