css column-rule-width özelliği, html elementinin çoklu sütunlu yapısında sütunlar arasındaki dikey ayracın genişlik özelliklerini belirlemek için kullanılır.
Aldığı değerler :
length : Uzunluk değeri. Verdiğimiz değer ile ayraç genişliği atanır.
thin : İnce
medium : Orta
thick : Kalın
inherit : Bir üst elementten miras alır.
initial : Varsılan değere döner.
Sütun sayısı belirtildikten sonra ayraçın özelliklerine genişlik ataması yapabiliriz.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin-bottom: 10px;
width: 400px;
padding: 5px;
border: 1px solid black;
column-count: 3;
column-rule-style: dotted;
}
.one { column-rule-width: thin; }
.two { column-rule-width: medium; }
.three { column-rule-width: thick; }
.four { column-rule-width: 15px; }
</style>
</head>
<body>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="two">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="three">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="four">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
</body>
</html> Html çıktısı:
