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

Özellik Tanımı
border tek bir bildirimde tüm css kenar özellikleri
border-bottom tek bildirimde alt kenar özellikleri
border-bottom-color alt kenar özellikleri
border-bottom-style alt kenar stili
border-bottom-width alt kenar genişliği
border-color dört kenarın rengi
border-left tek bildirimde sol kenar özellikleri
border-left-color sol kenarın rengi
border-left-style sol kenar stili
border-left-width sol kenar genişliği
border-right tek bildirimde sağ kenar özellikleri
border-right-color sağ kenar rengi
border-right-style sağ kenar stili
border-right-width sağ kenar genişliği
border-style tüm kenarların stilli
border-top tek bildirimde üst kenar özellikleri
border-top-color üst kenar rengi
border-top-style üst kenar stili
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 9 –Kutu modeli başlıklı makalemizde border, boşluk ve box hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious