คุณสมบัติ column-rule

คุณสมบัติ column-rule กำหนดเส้นขอบ ระหว่างคอลัมน์ในข้อความหลายคอลัมน์ ค่าที่รับจะเหมือนกับคุณสมบัติ border

ตัวอย่าง . แบบ solid

ในตัวอย่างนี้ ข้อความจะแบ่งออกเป็น 3 คอลัมน์ โดยมีเส้นขอบระหว่างคอลัมน์เป็น เส้นทึบหนา 1px (ระยะห่าง ระหว่างคอลัมน์จะถูกสร้างอัตโนมัติ เนื่องจากตั้งค่า column-gap เป็นค่า normal):

<div id="elem">
	some long text
</div>

#elem {
	column-rule: 1px solid black;
	column-count: 3;
	column-gap: normal;
	text-align: justify;
}

ตัวอย่าง . อิทธิพลของ column-gap

ในตัวอย่างนี้ ข้อความจะแบ่งออกเป็น 3 คอลัมน์ โดยมีช่องว่างระหว่างคอลัมน์ 50px เส้นขอบจะอยู่ตรงกลางของช่องว่าง (ทั้งซ้ายและขวาของเส้นขอบจะห่าง 25px):

<div id="elem">
	some long text
</div>

#elem {
	column-rule: 1px solid black;
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

ดูเพิ่มเติม

คุณสมบัติ column-width,
ซึ่งกำหนดความกว้างของคอลัมน์
คุณสมบัติ column-count,
ซึ่งกำหนดจำนวนคอลัมน์
คุณสมบัติ column-gap,
ซึ่งกำหนดช่องว่างระหว่างคอลัมน์
คุณสมบัติ column-span,
ซึ่งกำหนดจำนวนคอลัมน์ที่องค์ประกอบควรขยายไปถึง
คุณสมบัติ columns,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับการจัดข้อความหลายคอลัมน์