Top

CSS Dersleri Bölüm 10 – Border / Çerçeve – kenar

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

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Kendiniz deneyin »

 


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.

Not: “border-color” tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.

Örnek

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Kendiniz deneyin »

 


Tek tek kenarlar

Farklı kenarlar için farklı kenar özellikleri kullanabilirsiniz CSS’te:

Örnek:

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Kendiniz deneyin »

Yukarıdaki örnek, tek bir özellikte de belirtilebilinir:

Örnek

border-style:dotted solid;

Kendiniz deneyin »

border-style özelliği, birden dörde kadar özellik alabilir dört kenar olduğundan.

  • border-style:dotted solid double dashed;
    • üst kenar noktalı
    • sağ kenar düz
    • alt kenar çift
    • sol kenar şerit
  • border-style:dotted solid double;
    • üst kenar noktalı
    • sağ ve sol kenar düz
    • alt kenar çift
  • border-style:dotted solid;
    • üst ve alt kenar noktalı
    • sağ ve sol kenar düz
  • border-style:dotted;
    • tüm kenarlar noktalı

Yukarıdaki örneklerde border-style kullanımını gördünüz. Bununla beraber,border width ve border-color için de aynı kural geçerli olduğundan, rahatlıkla yazabilirsiniz.


Border – Shorthand property

Yukarıdaki örnekte görüldüğü üzere, kenarlar ile uğraşırken düşünülmesi gereken birçok özellik vardır.

Kodu kısaltarak tüm özelliklerin değerlerini tek bir satıda yazmak mümkün olur. Buna kısayazım özelliği denir.

Kenar özelliğinin kısa yazımı için kullanılacak css özelliği “border”‘dır:

Örnek

border:5px solid red;

Kendiniz deneyin »

border özelliğini kullandığınızda, verilen değerlerin sırası:

  • border-width
  • border-style
  • border-color

Yukarıdakilerden birinin eksik olması sorun değil sıraya bağlı kaldığınız müddetçe (yine de, border-style ‘i vermek gerekli).


Daha fazla uygulama↓

Tek bildirimde tüm css özellikleri üst kenar için
 Üst kenar için kısa yazım tekinği gösterilmekte.
Alt kenarın stillendirilmesi
 Alt kenarın nasıl biçimlendiğini gösterir.
sol kenarın genişliği
 Sol kenarın genişliğinin ayarlanması.
Dort kenarın renginin verilmesi
Dört kenarın csste renklerinin verilmesi.
Sağ kenarın renginin verilmesi
 Sağ kenarın renginin nasıl verildiğini gösterir.

Tüm Css’in kenar özellikleri

ÖzellikTanımı
bordertek bir bildirimde tüm css kenar özellikleri
border-bottomtek bildirimde alt kenar özellikleri
border-bottom-coloralt kenar özellikleri
border-bottom-stylealt kenar stili
border-bottom-widthalt kenar genişliği
border-colordört kenarın rengi
border-lefttek bildirimde sol kenar özellikleri
border-left-colorsol kenarın rengi
border-left-stylesol kenar stili
border-left-widthsol kenar genişliği
border-righttek bildirimde sağ kenar özellikleri
border-right-colorsağ kenar rengi
border-right-stylesağ kenar stili
border-right-widthsağ kenar genişliği
border-styletüm kenarların stilli
border-toptek bildirimde üst kenar özellikleri
border-top-colorüst kenar rengi
border-top-styleüst kenar stili
border-top-widthSets the width of the top border
border-widthSets the width of the four borders
No Comments