Kenarlıklar

border-style

Bu özellik ile kenarlıkların biçimi belirtilebilir. Girilebilecek değerlerden none varsayılan değerdir ve kenarlık olmayacağını belirtir. hidden değeri de benzer şekilde kenarlıkların görünmez olacağı manasına gelir. solid değeri sürekli, dotted değeri noktalı, dashed değeri kesikli ve double değeri çift çizgiyi ifade eder. groove değeri kenarlıkların elemana kazınmış gibi görünmesini, ridge değeri kenarlıkların elemandan bir çıkıntı gibi görünmesini sağlar. outset değeri kenarlıkların elemanı ekrandan dışarı geliyor gibi göstermesini sağlarken inset değeri kenarlıkların elemanı ekrana gömülü gibi göstermesini sağlar.

Eğer bu özelliğin karşısına yukarıda verilen değerlerden sadece biri girilirse tüm kenarlıklar bu biçimlendirmeyi kullanır. İki değer girilecek olursa ilk değer üst ve alt kenarlıkları, ikinci değer sağ ve sol kenarlıkları biçimlendirir. Üç değer girilmesi durumunda ilk değer üst kenarlığı, ikinci değer sağ ve sol kenarlıkları, son değer de alt kenarlığı biçimlendirir. Dört değer girilecek olursa girilen değerler sırasıyla üst kenarlığı, sağ kenarlığı, alt kenarlığı ve sol kenarlığı biçimlendirir.

Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-style: groove;
}
p.ornek2{
border-style: solid dashed;
}
p.ornek3{
border-style: solid dashed dotted;
}
p.ornek4{
border-style: solid dashed dotted double;
}
p{
border: 5px green;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

border-left-style, border-right-style, border-top-style ve border-bottom-style

Bu özellikler ile kenarlıklardan sadece bir tanesi biçimlendirilir. border-left-style sol kenarlığı, border-right-style sağ kenarlığı, border-top-style üst kenarlığı, border-bottom-style alt kenarlığı biçimlendirir. Bu özelliğin karşısına border-style özelliğinin karşısına girilen değerlerin aynıları girilebilir, fakat yalnızca bir tane değer girilmelidir. Bu özelliklerle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-left-style: groove;
border-right-style: groove;
border-top-style: groove;
border-bottom-style: groove;
}
p.ornek2{
border-left-style: dashed;
border-right-style: dashed;
border-top-style: solid;
border-bottom-style: solid;
}
p.ornek3{
border-left-style: dashed;
border-right-style: dashed;
border-top-style: solid;
border-bottom-style: dotted;
}
p.ornek4{
border-left-style: double;
border-right-style: dashed;
border-top-style: solid;
border-bottom-style: dotted;
}
p{
border: 5px green;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

border-width

Bu özellik ile kenarlıkların kalınlıkları belirtilir. Bu özelliğin karşısına uzunluk değerleri girilmelidir. Yüzdeli değerlere izin verilmemektedir. Sadece bir değer girilirse tüm kenarlıklar bu biçimlendirmeyi kullanır. İki değer girilecek olursa ilk değer üst ve alt kenarlıkları, ikinci değer sağ ve sol kenarlıkları biçimlendirir. Üç değer girilmesi durumunda ilk değer üst kenarlığı, ikinci değer sağ ve sol kenarlıkları, son değer de alt kenarlığı biçimlendirir. Dört değer girilecek olursa girilen değerler sırasıyla üst kenarlığı, sağ kenarlığı, alt kenarlığı ve sol kenarlığı biçimlendirir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-width: 5px;
}
p.ornek2{
border-width: 5px 1px;
}
p.ornek3{
border-width: 5px 1px 10px;
}
p.ornek4{
border-width: 5px 1px 10px 3px;
}
p{
border: solid green;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

border-left-width, border-right-width, border-top-width ve border-bottom-width

Bu özellikler ile kenarlıklardan sadece bir tanesinin kalınlığı biçimlendirilir. border-left-width sol kenarlığı, border-right-width sağ kenarlığı, border-top-width üst kenarlığı, border-bottom-width alt kenarlığı biçimlendirir. Bu özelliğin karşısına border-width özelliğinde olduğu gibi uzunluk girilebilir, fakat yalnızca bir tane değer girilmelidir. Bu özelliklerle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
border-bottom-width: 5px;
}
p.ornek2{
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 5px;
border-bottom-width: 5px;
}
p.ornek3{
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 5px;
border-bottom-width: 10px;
}
p.ornek4{
border-left-width: 1px;
border-right-width: 3px;
border-top-width: 5px;
border-bottom-width: 10px;
}
p{
border: solid green;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

border-color

Bu özellik ile kenarlıkların renkleri belirtilir. Bu özelliğin karşısına renk değerleri girilmelidir. Varsayılan değer siyahtır. Sadece bir değer girilirse tüm kenarlıklar bu biçimlendirmeyi kullanır. İki değer girilecek olursa ilk değer üst ve alt kenarlıkları, ikinci değer sağ ve sol kenarlıkları biçimlendirir. Üç değer girilmesi durumunda ilk değer üst kenarlığı, ikinci değer sağ ve sol kenarlıkları, son değer de alt kenarlığı biçimlendirir. Dört değer girilecek olursa girilen değerler sırasıyla üst kenarlığı, sağ kenarlığı, alt kenarlığı ve sol kenarlığı biçimlendirir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-color: red;
}
p.ornek2{
border-color: red blue;
}
p.ornek3{
border-color: red blue lime;
}
p.ornek4{
border-color: red blue lime yellow;
}
p{
border: 5px solid;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

border-left-color, border-right-color, border-top-color ve border-bottom-color

Bu özellikler ile kenarlıklardan sadece bir tanesinin rengi biçimlendirilir. border-left-color sol kenarlığı, border-right-color sağ kenarlığı, border-top-color üst kenarlığı, border-bottom-color alt kenarlığı biçimlendirir. Bu özelliğin karşısına border-color özelliğinde olduğu gibi renk değeri girilebilir, fakat yalnızca bir tane değer girilmelidir. Bu özelliklerle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-left-color: red;
border-right-color: red;
border-top-color: red;
border-bottom-color: red;
}
p.ornek2{
border-left-color: blue;
border-right-color: blue;
border-top-color: red;
border-bottom-color: red;
}
p.ornek3{
border-left-color: blue;
border-right-color: blue;
border-top-color: red;
border-bottom-color: lime;
}
p.ornek4{
border-left-color: yellow;
border-right-color: blue;
border-top-color: red;
border-bottom-color: lime;
}
p{
border: 5px solid;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

border-left, border-right, border-top ve border-bottom

Bu özellikler ile tek bir kenarlığın üç özelliği bir seferde biçimlendirilebilir. border-left sol kenarlığı, border-right sağ kenarlığı, border-top üst kenarlığı ve border-bottom alt kenarlığı biçimlendirir. Bu özelliklerin kullanım formatı şu şekildedir:

border-xxx: "border-width değeri" "border-style değeri" "border-color değeri" 

Değerlerden eksik bırakılan olursa o değer yerine varsayılan değer kullanılır. Bu özelliklerle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-left: 5px solid red;
border-right: 1px dashed blue;
border-top: dotted lime;
border-bottom: 10px double;
}
p.ornek2{
border-left: 1px dashed aqua;
border-right: 5px double darkgray;
border-top: 10px solid;
border-bottom: dotted;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
</body>
</html>

border

Bu özellik ile bir elemanın dört kenarlığının birden üç özelliği tek seferde belirtilebilir. Bu özelliğe girilebilecek değerler border-left, border-right, border-bottom ve border-top özelliklerine girilebilecek değerler ile aynıdır. Bu özellik ile biçimlendirme yapıldığında tüm kenarlıklar aynı özelliklere sahip olur. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border: 5px solid red;
}
p.ornek2{
border: 5px double darkgray;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
</body>
</html>

border-radius

Bu özellik kullanılarak kenarlıkların köşeleri ovalleştirilebilir. Bu özelliğin kullanım şekli şu formattadır:

border-radius: "yatay yarıçap değerleri" / "dikey yarıçap değerleri"

Burada iki kısma da dört uzunluk değeri girilebilir. Tek değer girilirse tüm köşeler için bu değer kullanılacaktır. İki değer kullanılması durumunda ilk değer sol üst ve sağ alt köşelerin, ikinci değer sağ üst ve sol alt köşelerin değeri olacaktır. Üç değer kullanıldığında ilk değer sol üst köşenin, ikinci değer sağ üst ve sol alt köşelerin, son değer de sağ alt köşenin değeri olur. Dört değer girildiğinde ise değerler sırasıyla sol üst köşenin, sağ üst köşenin, sağ alt köşenin ve sol alt köşenin değerleri olacaktır. 

Bu özelliğe değer girmenin bir başka yolu da "/" işaretini kullanmadan sadece yatay yarıçap değerleri girmektir. Bu durumda dikey yarıçap değerleri yatay yarıçap değerleri ile aynı olacaktır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmamakla birlikte nasıl çalıştığının daha iyi anlaşılması için aşağıdaki örneğin incelenmesi yararlı olacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-radius: 10px 20px 10px 20px/20px 10px 20px 10px;
}
p.ornek2{
border-radius: 10px 20px 10px 20px/20px 10px;
}
p.ornek3{
border-radius: 10px 20px 10px 20px;
}
p.ornek4{
border-radius: 25px;
}
p{
border: 2px solid red;
height: 50px;
padding-left: 10px;
padding-top: 10px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

Yukarıdaki örnekte ilk paragrafta yatay ve dikey yarıçap için tüm değerler belirtilmiştir. İkinci parafta ise yatay yarıçaplar için tüm değerler yine ilk paragraftaki ile aynı olacak şekilde tamamen belirtilmiştir, dikey yarıçaplar için ise sadece iki değer kullanılmıştır, bu nedenle sol üst köşe ve sağ alt köşe 20px, sağ üst köşe ve sol alt köşe 10px değerini alacaktır. Bu değerler yine birinci paragraftakilere karşılık geldiği için ilk paragrafla aynı sonuç elde edilecektir. Üçüncü paragrafta sadece yatay yarıçaplar belirtilmiştir, bu nedenle dikey yarıçaplar da aynı değerleri kullanacaktır. Son paragrafta ise sadece tek bir değer girilmiştir. Bu nedenle tüm yarıçaplar bu değeri alacaktır.


border-top-left-radius, border-top-right-radius, border-bottom-left-radius ve border-bottom-right-radius,

Bu özellikler ile tek bir köşenin ovalliği ayarlanabilir. border-top-left sol üst köşenin, border-top-right sağ üst köşenin, border-bottom-left sol alt köşenin ve border-bottom-right sağ alt köşenin ovalliğini belirler. Buraya girilen uzunluk değerleri araya "/" konmadan boşluklu olarak yazılır. Yine ilk değer yatay yarıçap ikinci değer dikey yarıçaptır. Yine dikey yarıçap değeri girilmediğinde yatay yarıçaptaki değer dikey yarıçap değeri olarak da kullanılır. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
border-top-left-radius: 10px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 20px 10px;
}
p.ornek2{
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
}
p.ornek3{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
p.ornek4{
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
p{
border: 2px solid red;
height: 50px;
padding-left: 50px;
padding-top: 20px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>