HTML สร้างวงกลม จาก div ด้วย CSS

HTML สร้างวงกลม จาก div ด้วย CSS บทความนี้สอนเขียนสร้างวงกลมด้วยแท็ก div ของ HTML และใช้คำสั่ง border-radius ของ CSS ในการเปลี่ยน div รูปสี่เหลี่ยมให้เป็นรูปวงกลม พร้อมลงสี สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML สร้างวงกลม จาก div ด้วย CSS

<style>
    .circle {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        border: solid 5px darkcyan;
        border-radius: 100%;
    }
</style>

<div class="circle"></div>

HTML สร้างวงกลม จาก div ด้วย CSS จากตัวอย่างโค้ดสร้างแท็ก div ใน HTML และเรียกใช้ class ชื่อ circle จาก CSS โดย class นี้ใช้คำสั่ง border-radius: 100% ทำให้เปลี่ยนจากรูปสี่เหลี่ยมเป็นรูปวงกลม พร้อมกำหนดขนาด 200px x 200px และลงสีพร้อมเส้นขอบเพื่อความสวยงาม