AnasayfaCssCss Borders Nedir ? Nasıl Kullanılır ?
49

Css Borders Nedir ? Nasıl Kullanılır ?

nhtctn nhtctn
13 Haziran 2020 Css

Css border nedir özellikleri nelerdir nasıl kullanılır buna değinelim.

Border elementlerimize verdiğimiz kenarlıktır. Çerveve çizgisi gibi düşünebiliriz.

Border 3 adet özellik almaktadır.Bunlar  border-style, border-width ve border-color özellikleridir.

border-style

Çizgimizin türünü temsil etmektedir.Alacağı değerker aşağıdaki gibidir

  • dotted – Noktalı çizgi
  • dashed – Kesik çizgilerden oluşan çizgi
  • solid – Düz çizgi
  • double – Çift çizgi
  • groove – 3 boyutlu oluklu çizgi. Bu efekt border rengine göre ortaya çıkar.
  • ridge – Çıkıntılı çizgi. Bu efekt border rengine göre ortaya çıkar.
  • inset – İçe doğru 3 boyutlu görünen çizgi. Bu efekt border rengine göre ortaya çıkar.
  • outset – Dışa doğru 3 boyutlu çizgi. Bu efekt border rengine göre ortaya çıkar.
  • none – Kenar çizgisi yok
  • hidden- Gizli kenar çizgisi

Örnek

<body>
    <p class="solid">Border nedir nasıl kullanılır.</p>
    <p class="dotted">cetinyazilim.com</p>
    <p class="dashed">Yazılım Mühendisliği</p>
    <p class="groove">Html-Css-Bootstrap-Javascript</p>
</body>
<style>
        .solid {
            border-style: solid;
        }
        .dotted {
            border-style: dotted;
        }
        .dashed {
            border-style: dashed;
        }
        .groove {
            border-style: groove;
        }
    </style>

border-width

Kenarlığımızın kalınlığı belirler.Varsayılan olarak sıfırdır.

<body>
    <p class="solid">Border nedir nasıl kullanılır.</p>
    <p class="dotted">cetinyazilim.com</p>
    <p class="dashed">Yazılım Mühendisliği</p>
    <p class="groove">Html-Css-Bootstrap-Javascript</p>
</body>
<style>
        .solid {
            border-style: solid;
            border-width: 3px;
        }
        .dotted {
            border-style: dotted;
            border-width: 6px;
        }
        .dashed {
            border-style: dashed;
            border-width: 9px;
        }
        .groove {
            border-style: groove;
            border-width: 12px;
        }

border-color

Kenarlığımızın rengini belirler.

<body>
    <p class="solid">Border nedir nasıl kullanılır.</p>
    <p class="dotted">cetinyazilim.com</p>
    <p class="dashed">Yazılım Mühendisliği</p>
    <p class="groove">Html-Css-Bootstrap-Javascript</p>
</body>
<style>
        .solid {
            border-style: solid;
            border-width: 3px;
            border-color:tomato;
        }

        .dotted {
            border-style: dotted;
            border-width: 6px;
            border-color:green;
        }

        .dashed {
            border-style: dashed;
            border-width: 9px;
            border-color:yellow;
        }

        .groove {
            border-style: groove;
            border-width: 12px;
            border-color:purple;
        }

    </style>

Örnek

Aşağıdaki örnekte farklı renkler yazaraktan renklendirme yapabiliriz.

<body>
    <p class="solid">Border nedir nasıl kullanılır.</p>
</body>
<style>
        .solid {
            border-style: solid;
            border-width: 5px;
            border-color: red green blue yellow;
        }

    </style>

Önemli

Şimdiye kadar gördüğümüz bu 3 özelliği tek satırda vermemiz mümkündür.

<body>
    <p>Border nedir nasıl kullanılır.</p>
</body
<style>
        p {
            border: 5px solid green;
        }
    </style>

Yorum yazın

BENZER YAZILAR