ทำรูปเป็นวงกลม HTML ด้วย CSS border-radius

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

ตัวอย่าง ทำรูปเป็นวงกลม HTML ด้วย CSS border-radius

<style>
    .circle {
        border-radius: 100%;
    }
</style>

<img src="devdit.com/chmod/user_avatar/3default.jpg" class="circle">

ทำรูปเป็นวงกลม HTML จากตัวอย่างโค้ดสร้าง class ใน CSS ชื่อ circle พร้อมคำสั่ง border-radius: 100% คือกำหนดให้ขอบทั้ง 4 มุมโค้งเข้าหากันแบบ 100% จากนั้นนำ class circle ไปใช้งานกับแท็ก img ของ HTML เพื่อทำให้รูปเป็นวงกลม ด้วยภาษา CSS คำสั่ง border-radius