ในการจัดสไตล์ HR Element ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; } hr{ margin-bottom: 20px; } .solid { border-top: 5px solid rgb(16, 2, 141); } .dashed { border-top: 5px dashed rgb(190, 13, 146); } .double { border-top: 5px double rgb(22, 145, 11); } .dotted { border: 5px dotted rgb(200, 255, 0); } .round { border: 5px solid rgb(35, 196, 142); border-radius: 5px; } </style> </head> <body> <h1 style="text-align: center;">HR styling example</h1> <hr class="solid"> <hr class="dashed"> <hr class="double"> <hr class="dotted"> <hr class="round"> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
