[CSS] เทคนิคการทำให้รูปแบบสี่เหลี่ยมเป็นวงกลม

          Border-radius เป็น property อย่างหนึ่งของ CSS เป็นการใส่ขอบแบบวงกลมให้กับ Object ซึ่งมันสามารถใช้กับรูปภาพได้ด้วย

รูปภาพปกติที่ยังไม่ได้ใส่ border-radius

รูปภาพที่ใส่ border-radius 20%

รูปภาพที่ใส่ border-radius 50%

รูปภาพที่ใส่ border-radius 100%

           จากรูปข้างบนจะเห็นได้ว่ายิ่งใส่ค่ามาก ความกลมของขอบจะยิ่งกลมขึ้นจนกลายเป็นวงกลม ซึ่งในระดับ 50% และ 100% นั้นจะเห็นว่าเหมือนกันเลย ดังนั้น จะใส่ 50% หรือ มากกว่านั้น ก็จะออกมาเป็นวงกลมเหมือนกัน