Beytullah Toprak
CSS Kenarlıklar – CSS Sınır (Border)

CSS Kenarlıklar – CSS Sınır (Border)


Sınır (border)özellikleri bir unsuru temsil kutunun sınır nasıl görünmesi gerektiğini belirtmek için izin verir. Değiştirebileceğiniz bir sınırın üç özelliği vardır -

  • Border-color bir kenarının rengini belirler.
  • Border-style sınır katı, kesikli çizgi, çift çizgi veya diğer olası değerlerden biri gerekip gerekmediğini belirtir.
  • Border-width sınır genişliğini belirtir.

Şimdi bu özelliklerin örneklerle nasıl kullanılacağını göreceğiz.

Sınır Genişliği Özelliği (border-width)

border-width  Sınır alanının genişliğini belirtir. Bir elemanın sınırının dört tarafının tümünün kalınlığını aynı anda ayarlamak için kestirme bir özelliktir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS border-width Örneği</title>
  <style type="text/css">
      p{
          border-style: solid;
          border-width: 5px 10px 15px 20px;
      }
  </style>
</head>
<body>
 
  <p>İlk üst - sağ - alt - sol olmak üzere değer verilir. Saat yönüne doğru.</p>

</body>
</html>

Ayrı ayrı ayarlamak istiyorsanız:

  • border-left - Sol kenar
  • border-right - Sağ kenar
  • border-top - Üst kenar
  • border-bottom - Alt kenar

Sınır / Kenar Stil Değerleri (border-style)

border-style  bir çerçevenin kenar stilini ayarlar.

border-style: Özellik, aşağıdaki değerlerden birini alabilir nonehiddendasheddotteddoublegrooveinsetoutsetridgeve solid

CSS Border

div {
    border-style: solid;
    border-style: 2px;
    border-style: red;
}

Örneğin kısa olarak tek satırda yazmak istiyorsak (border) elementini kullanabilirsiniz.

div {
    border: 2px red solid;
}

Sınır / Kenar Rengi (border-color)

border-color bir elemanın sınırının dört tarafının rengini ayarlamak için kısa bir özelliktir. Renk adı (blue), RGB değeri ( rgb(255,0,0) ) ya da Hex değeri (#ff0000) kullanılabilir.

p {
    border-style: solid;
    border-color: #ff0000;
}

Not: border-color, özelliği tek başına kullanıldığında herhangi bir değişiklik yapmaz. Beraberinde stil (border-style) özelliği de kullanılmalıdır.

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

  • border-left-style - Sol kenarın şekli.
  • border-right-style - Sağ kenarın şekli.
  • border-top-style - Üst kenarın şekli.
  • border-bottom-style - Alt kenarın şekli.

Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap