HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css border style
css border çeşitleri
css border ekleme
css border examples
css border kalınlık
css border kaldırma
css border nedir
css border özellikleri
css border verme
css border yapma
css border styles examples
css border style list
css border style names
css border styles
css border width and color
css border width style
css border width style color
css border colors
css border color and style
css border color gradient
css border color change
css border color examples
css border color select
css border radius examples
css border radius kullanımı

CSS Border(Kenarlık)

CSS Border(Kenarlık)

Css dilinin diğer bir temel özelliği kenarlıklardır. Etiketlerinize kenarlık eklemek isteyebilirsiniz. Böylelikle daha hoş bir görünüme sahip olacaklardır. Kenarlıklar değişik tiplerde, renklerde ve yönlerde olabilirler. Bunları belirlemek artık sizin göz zevkinize kalmış. :)

1-Border Style(Kenarlık Stili)

Html elemanlarınıza yani etiketlerinize kenarlık eklemek isteyebilirsiniz. Css dili bize bir çok kenarlık stilleri kullanmamızı sağlıyor. Aşağıdaki örnekte <p> etiketlermizde sırayla tüm kenarlık stillerimizi inceleyebilir, istediğinizi seçip kendi web sayfanızın istediğiniz bölümlerinde kullanabilirsiniz.

Kullanımı:

Css dilinin diğer bir temel özelliği kenarlıklardır. Etiketlerinize kenarlık eklemek isteyebilirsiniz. Böylelikle daha hoş bir görünüme sahip olacaklardır. Kenarlıklar değişik tiplerde, renklerde ve yönlerde olabilirler. Bunları belirlemek artık sizin göz zevkinize kalmış. :)

1-Border Style(Kenarlık Stili)

Html elemanlarınıza yani etiketlerinize kenarlık eklemek isteyebilirsiniz. Css dili bize bir çok kenarlık stilleri kullanmamızı sağlıyor. Aşağıdaki örnekte <p> etiketlermizde sırayla tüm kenarlık stillerimizi inceleyebilir, istediğinizi seçip kendi web sayfanızın istediğiniz bölümlerinde kullanabilirsiniz.

Kullanımı:

Css
/*p etiketlerinde geçerli sınıflarımız*/
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Html
<html>
<head>
</head>
<body>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>

2-Border Width(Kenarlık Genişliği)

Kenarlıklarımızın genişliğini ayarlayabiliriz. Yani sizin anlayacağınız şekilde kenarlıklarımızın kalınlığını sayı ve uzunluk birimi (px, pt, cm, em, etc) ile yada ingilizce uzunluk sıfatlarıyla (thin, medium,thick) ayarlayabiliriz. Yazarak anlatmak yerine detaylı bir örnekle açıklayamayı tercih ettim. Aşağıdaki örneğe bakarak uzunluk birimlerinin nasıl değiştiğini inceleyebilirsiniz..

Css
p.birinci {
border-style: solid;
border-width: 5px;
}
p.ikinci {
border-style: solid;
border-width: medium;
}
p.ucuncu {
border-style: dotted;
border-width: thin;
}
p.dorduncu{
border-style:dashed;
border-width:thick;
}
Html
<html>
<head>
</head>
<body>
<p class="birinci">Birinci paragraf</p>
<p class="ikinci">İkinci paragraf</p>
<p class="ucuncu">Üçüncü paragraf</p>
<p class="dorduncu">Dördüncü paragraf</p>
<p class="besinci">Beşinci paragraf</p>
<p class="altinci">Altıncı paragraf</p>
<p class="yedinci">Üçüncü paragraf</p>
</body>
</html>

3-Border Color(Kenarlık Rengi)

Kenarlıklarımızın renklerini belirlemek için bu özelliği kullanırız. Renk değerini verirken; rengin ismini veya renk kodlarını kullanabilirsiniz.

Css
p { /* tüm p etiketleri */
padding:3px; /*yazı ile çizgi arası boşluk yani iç boşluk*/
}
p.birinci {
border-style: solid;
border-color: #ccc;/*gri hex kodu*/
}
p.ikinci {
border-style: solid;
border-color: rgb(125, 220, 0);/*açık yeşil rgb kodu*/
}
p.ucuncu {
border-style: solid;
border-color: red green blue yellow; /*üst,sağ,alt,sol renkleri*/
}
Html
<html>
<head>
</head>
<body>
<p class="birinci">Birinci paragraf</p>
<p class="ikinci">İkinci paragraf</p>
<p class="ucuncu">Üçüncü paragraf</p>
</body>
</html>

4-Tek Yönlü Kenarlık

Kenarlık ekleyeceğiniz alanın dört tarafınında birden kenarlık olmasını istemeyebilirsiniz. Sadece solda yada sadece altta vb. şekilde olmasını sağlayabilirsiniz. Bu size ilgili alanınız için daha estetik bir görünüm kazandırmanızı sağlıyacaktır.

Not: Kenarlığınızın stil (border-style) özelliğini mutlaka tanımlamanız gerekmektedir. Bu her zaman için geçerlidir.
Css
p {/*tüm p etiketleri*/
border-left: 6px solid red; /* sol çizgi:kalınlık,stil,renk */
background-color: lightgrey;/*arkaplan rengi etiketin*/
padding-left:3px;/*etiketin sol iç kısmı ile yazı arası boşluk*/
}
Html
<html>
<head>
</head>
<body>
<p class="birinci">Birinci paragraf</p>
<p class="ikinci">İkinci paragraf</p>
<p class="ucuncu">Üçüncü paragraf</p>
</body>
</html>

5-Border Radius(Kenarlık Eğrileri)

Kenarlıklarınızın köşelerini eğriltebilirsiniz. Böylelikle daha güzel bir görünüme kavuşacaklardır. Ne kadar eğrileceğini genellikle "px" cinsinden sayı değerleri ile ayarlıyabilirsiniz.

Css
p.normal {
border: 2px solid blue;
}
/*p etiketi içindeki tüm round1 classları*/
p.round1 {
border: 2px solid green;
border-radius: 5px;
}
/*p etiketi içindeki tüm round2 classları*/
p.round2 {
border: 2px solid orange;
border-radius: 8px;
}
/*p etiketi içindeki tüm round3 classları*/
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
Html
<html>
<head>
</head>
<body>
<p class="normal">Birinci paragraf</p>
<p class="round1">İkinci paragraf</p>
<p class="round2">Üçüncü paragraf</p>
<p class="round3">Dördüncü paragraf</p>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster