CSS Sınır (Border) Özelliği
CSS Sınır (Border) Özelliği
CSS Sınır (border) özellikleri, bir elemanın sınırlarına ait biçim (stil), boyut ve renkleri belirler.
Bu eğitim içeriğimizin devamında sınır stillerini nasıl değiştereceğinizi, renk, genişlik gibi özellikleri nasıl kullanacağınızı göreceksiniz.
Sınır Biçimi (Border Style)
Border-style özelliği, hangi tür sınır çizgisinin görüntüleneceğini belirler.
CSS kodu içindeki border-style değerlerini tanımlarken aşağıdaki özellikleri kullanabilirsiniz:
- none: Sınırı kaldırır.
- dotted: Noktalı bir sınır belirler.
- dashed: Kesikli çizgi şeklinde bir sınır belirler.
- solid: Katı sınır çizgisi belirler.
- double: İki sınır tanımlar. Her iki sınır çizgisi de border-width değeriyle belirlenir.
- groove: 3 boyutlu (3D) ve yivi dışa dönük sınır çizgisi tanımlar. Oluşacak etkinin derecesi, border-color özelliğine bağlıdır.
- ridge: 3D ortalanmış sınır çizgisi tanımlar. Etkinin derecesi, border-color değerine bağlıdır.
- inset: 3D içe dönük biçimde sınır çizgisi belirler. Etkinin derecesi, border-color değerine bağlıdır.
- outset: 3D tamamen dışa dönük sınır çizgisi tanımlar. Etkinin derecesi, border-color değerine bağlıdır.
Sınır Genişliği
CSS kodlamada border-width özelliği, sınır çizgisinin genişliğini atamak için kullanılır.
Genişlik piksel cinsinden atanır ya da önceden tanımlanmış üç değerden biri olarak atanabilir. Bu üç değer, thin (ince), medium (orta) ve thick (kalın) şeklindedir.
p.one {
border-style: dashed;
border-width: 6px;
}
p.two {
border-style: dashed;
border-width: medium;
}
Sınır Çizgisi Rengi
CSS kodlamada border-color özelliği, sınır çizgisinin rengini atamak için kullanılır. Renk aşağıdaki yollardan biriyle atanır:
- name: renk adı (red,blue) kullanılarak renk atamak.
- RGB: Red-Green-Blue renk uzayı ile renk atamak: "rgb(255,111,30)" gibi.
- Hex: hexadecimal (onaltılık) değer ile renk atamak: "#ff0ec0" gibi.
Sınır çizgisini dilerseniz şeffaf yani "transparent" olarak da atayabilirsiniz.
Örnek kullanımı aşağıdaki gibidir:
p.one {
border-style: solid;
border-color: blue;
}
p.two {
border-style: dotted;
border-color: #98bf21;
}
Farklı Kenarlar
CSS'de elemanların farklı kenarları farklı özelliklerde olabilir.
Aşağıdaki örnekte <p> elemanı için belirlenen sınırlarda farklı özellikler tanımlanmış durumda:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: solid;
}
Şimdi örneğimizle nasıl yapıldığını görelim:
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: solid;
}
</style>
</head>
<body>
<p>3 FARKLI KENAR CIZGISI</p>
</body>
</html>
Ekran Çıktısı;
Farklı Sınır Özellikleri Nasıl Tanımlanır?
- border-style: dotted solid double dashed;
Stilini denediğinizde, üst sınır nokta nokta, sağ sınır katı, alt sınır çift çizgi, sol sınır kesikli çizgi şeklinde olur.
- border-style: dotted solid double;
Stilini denediğinizde, üst sınır noktalı, sağ ve sol sınırlar katı çizgi, alt sınır çift çizgi şeklinde olur.
- border-style: dotted;
Stilini denediğinizde, dört kenar çizgisi de noktalı olur.
Sınır - Kısayol Özelliği
Sınır (Border) özelliğinin aşağıda açıklandığı gibi kısayol tanımlama olanağı da vardır.
- border-width
- border-style (required)
- border-color
nitelikleri tek bir sınır özelliğine aşağıdaki gibi atanabilir:
p {
border: 6px solid pink;
}
Şimdi bunu nasıl kullanacağımıza bakalım:
<html>
<head>
<style>
p {
border: 8px solid pink;
}
</style>
</head>
<body>
<p>YESIL IPEK GOMLEGININ YAKASI<br>
UZAK ZAMANA DUSER<br>
HERSEYIN FAZLASI ZARARDIR YA<br>
FAZLA SIIRDEN GITTI EDIP CANSEVER<br>
CEMAL SUREYA</p>
</body>
</html>
Ekran Çıktısı;
Yorumlar
Yorum Gönder