Kenarlıklar

Kutu modeli modülünde, kutu modelinin her bölümünü açıklamak için bir çerçeve analojisi kullandık.

Yan yana duran üç resim çerçevesi.
Ortadaki karede, kutu modelinin bölümleri üstte yer alır.

Kenarlık kutusu, kutularınızın çerçevesidir. border mülkleri, bu çerçeveyi aklınıza gelebilecek hemen hemen her tarzda oluşturmanız için çok çeşitli seçenekler sunar.

Kenarlık özellikleri

Ayrı border mülkleri, kenarlığın çeşitli bölümlerine stil uygulamanın bir yolunu sağlar.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Stil

Kenarlık görünmesi için border-style değerini tanımlamanız gerekir. Birkaç seçenekten birini tercih edebilirsiniz:

ridge, inset, outset ve groove stilleri kullanıldığında tarayıcı, kontrast ve derinlik sağlamak için gösterilen ikinci rengin kenarlık rengini koyulaştırır. Bu davranış, özellikle black gibi koyu renkler söz konusu olduğunda tarayıcılar arasında değişiklik gösterebilir. Chrome'da bu kenar stillerinin rengi düz görünür. Firefox'ta ise daha koyu bir ikinci renk sağlamak için rengi açılır.

Tarayıcı davranışı diğer kenar stillerinde de değişiklik gösterebilir. Bu nedenle, sitenizi farklı tarayıcılarda test etmeniz önemlidir. Bu farkın yaygın bir örneği, her tarayıcının dotted ve dashed stillerini nasıl oluşturmasıdır.

Chrome, Firefox ve Safari'deki kenar demosunda, kenarların gösterilme biçimindeki ince farklılıklar gösterilmektedir.
Chrome, Firefox ve Safari'de gösterilen kenarlıklar.

Kutunuzun her bir tarafında kenarlık stilini ayarlamak için border-top-style, border-right-style, border-left-style ve border-bottom-style öğelerini kullanabilirsiniz.

Steno

margin ve padding'te olduğu gibi, kenarlığınızın tüm bölümlerini tek bir beyanla tanımlamak için border kısayol özelliğini kullanabilirsiniz.

.my-element {
    border: 1px solid red;
}

border kısalığındaki değerlerin sırası border-width, border-style ve border-color şeklindedir.

Renk

border-color simgesini kullanarak kutunuzun tüm taraflarının veya her bir tarafının rengini ayarlayabilirsiniz. Varsayılan olarak kutunun mevcut metin rengi kullanılır: currentColor. Bu, yalnızca genişlik gibi çerçeve özelliklerini belirtirseniz açıkça ayarlamadığınız sürece rengin hesaplanan değer olacağı anlamına gelir.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Kutunuzun her iki tarafına da kenar rengi ayarlamak için border-top-color, border-right-color, border-left-color ve border-bottom-color karakterlerini kullanın.

Genişlik

Kenarlık genişliği, çizginin kalınlığını ifade eder ve border-width ile kontrol edilir. Varsayılan kenarlık genişliği medium'tir. Ancak bir stil tanımlamadığınız sürece bu bilgi görünmez. thin ve thick gibi diğer adlandırılmış genişlikleri kullanabilirsiniz.

border-width mülkleri, px, em, rem veya % gibi bir uzunluk birimini de kabul eder. Kutunuzun her iki tarafındaki kenarlık genişliğini ayarlamak için border-top-width, border-right-width, border-left-width ve border-bottom-width karakterlerini kullanın.

Mantıksal özellikler

Mantıksal Özellikler modülünde, açıkça üst, sağ, alt veya sol taraflar yerine blok akışı ve satır içi akışa nasıl atıfta bulunacağınızı öğrendiniz.

Kenarlıklarda da bu özelliği kullanabilirsiniz:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

Bu örnekte, .my-element öğesinin tüm kenarlarının mevcut metin renginde 2px noktalı bir kenarlığa sahip olduğu tanımlanmıştır. inline-end kenarı daha sonra 2px olarak tanımlanır, düz ve kırmızıdır. Yani soldan sağa okunan dillerde (ör. İngilizce) kırmızı kenar, kutunun sağ tarafında olur. Arapça gibi sağdan sola okunan dillerde kırmızı kenar, kutunun sol tarafında olur.

Kenarlıklardaki mantıksal mülkler için tarayıcı desteği değişiklik gösterir. Bu nedenle, kullanmadan önce destek bilgilerini kontrol edin.

Kenarlık yarıçapı

Bir kutuya yuvarlatılmış köşeler vermek için border-radius özelliğini kullanın.

.my-element {
    border-radius: 1em;
}

Bu kısaltma, kutunuzun her köşesine tutarlı bir kenar ekler. Diğer kenar özellikleri gibi, her bir kenar için kenar yarıçapını border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius ile tanımlayabilirsiniz.

Her köşenin yarıçapını kısaltma olarak da belirtebilirsiniz. Bu kısaltma şu sırayla yazılır: sol üst, sağ üst, sağ alt ve sol alt.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Kenarlık yarıçapı dikey ve yatay kenar olmak üzere iki bölüme ayrıldığından, bir köşe için tek bir değer tanımlayarak başka bir kısayol kullanıyorsunuzdur. Bu, border-top-left-radius: 1em değerini ayarlarken sol üstten üst yarıçapını ve sol üstten sol yarıçapını ayarladığınız anlamına gelir.

Her iki özelliği de köşe başına aşağıdaki gibi tanımlayabilirsiniz:

.my-element {
    border-top-left-radius: 1em 2em;
}

Bu işlem, 1em değerine sahip bir border-top-left-top ve 2em değerine sahip bir border-top-left-left değeri ekler. Bu işlem, sol üst kenarlığın yarıçapını varsayılan dairesel yarıçap yerine eliptik yarıçapa dönüştürür.

Bu değerleri, standart değerlerden sonra eliptik değerleri tanımlamak için / kullanarak border-radius kısalığında tanımlayabilirsiniz. Bu sayede yaratıcılığınızı konuşturabilir ve karmaşık şekiller oluşturabilirsiniz.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Kenarlık resimleri

CSS'de yalnızca çizgi tabanlı bir kenar kullanmanız gerekmez. border-image kullanarak her tür resmi de kullanabilirsiniz. Bu kısayol mülkü, kaynak resmi, bu resmin nasıl dilimlendiğini, resim genişliğini, kenarlığın kenardan ne kadar uzakta olduğunu ve nasıl tekrarlanacağını ayarlamanıza olanak tanır.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width özelliği, border-width gibidir: kenarlık resminizin genişliğini bu şekilde ayarlarsınız. border-image-outset özelliği, kenarlık resminiz ile etrafını sardığı kutu arasındaki mesafeyi ayarlamanıza olanak tanır.

border-image-source

border-image-source (kenarlık resminin kaynağı), CSS degradeleri dahil olmak üzere geçerli herhangi bir resim için url olabilir.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice özelliği, bir resmi 4 bölme çizgisinden oluşan 9 parçaya bölmenize olanak tanıyan kullanışlı bir özelliktir. Üst, sağ, alt ve sol ofset değerini tanımladığınız margin kısayolu gibi çalışır.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Demoda kullanılan ve dört dilimi mavi çizgilerle gösteren görsel

Göreli konum değerleri tanımlandığında, resmin 9 bölümü olur: 4 köşe, 4 kenar ve bir orta bölüm. Köşeler, kenar resmiyle birlikte öğenin köşelerine uygulanır. Kenarlar, ilgili öğenin kenarlarına uygulanır. border-image-repeat özelliği, bu kenarların alanlarını nasıl doldurduğunu tanımlar ve border-image-width özelliği, dilimlerin boyutunu kontrol eder.

Son olarak fill anahtar kelimesi, dilimleme işleminin bıraktığı orta bölümün öğenin arka plan resmi olarak kullanılıp kullanılmayacağını belirler.

border-image-repeat

border-image-repeat, CSS'ye kenarlık resminizin nasıl tekrarlanmasını istediğinizi bildirmek için kullanılır. background-repeat ile aynı şekilde çalışır.

  • İlk değer stretch'tür. Bu değer, mümkün olduğunda mevcut alanı doldurmak için kaynak resmi uzatır.
  • repeat değeri, kaynak görüntünün kenarlarını mümkün olduğunca çok sayıda karoya böler ve bunu yapmak için kenar bölgelerini kırpabilir.
  • round değeri, tekrar değeriyle aynıdır ancak resim kenar bölgelerini mümkün olduğunca çok sığacak şekilde kırpmak yerine, resimleri uzatma ve tekrarlayarak sorunsuz bir tekrar elde eder.
  • space değeri yine tekrarla aynıdır ancak bu değer, kesintisiz bir desen oluşturmak için her kenar bölgesi arasına boşluk ekler.

Öğrendiklerinizi test etme

Sınırlarla ilgili bilginizi test edin

Varsayılan kenarlık rengi nedir?

black
currentColor
white
historicColor
.my-element {
  border: solid hotpink;
}

Bir kenarlığın varsayılan genişliği nedir?

solid
1px
medium

border-inline: 1px solid şunu yapar:

İçine kenarlıklar ekleyin.
İlk satıra kenarlıklar ekleyin.
sol ve sağa kenarlıklar ekleyebilirsiniz (Latin düzenlerinde).
üst ve alt kısımlara kenarlıklar ekleyebilirsiniz (Latin düzenlerinde).