คำสั่ง Border-Radius ใน css นั้นเป็นคำสั่งสำหรับกำหนดขอบรูปร่าง Element นั้นๆ ให้ขอข้างมีความโค้งเป็นวงกลม
โดยจะใส่ค่าตามรูปด้านล่าง
จะเป็นการใส่ค่าเดียว ที่ 30% ซึ่งอาจะใช้เป็น px ก็ได้ (ถ้าจะให้เป็นวงกลมใส่ 50%)
หรือเราสามารถใส่ 4 ค่าก็ได้ เพื่อให้เป็นวงกลมรูปร่างแปลกตา เช่น border-radius:30% 70% 40% 60%; ตามตัวอย่างด้านล่าง
ซึ่ง border-radius สามารถใส่ค่าได้ละเอียดมากกว่านั้น คือ 8 ค่าเพื่อทำให้มีความเนียนมากขึ้น เช่น 59% 41% 65% 36% / 44% 45% 55% 56% ผลจะออกมาตามตัวอย่างด้านล่าง
ซึ่งเราสามารถเอาความสามารถตรงนี้ไปรวมกับ Css animation ก็จะสามารถสร่าง Animation เก๋ๆให้กับเว็บไซต์เราได้ ตามตัวอย่างด้านล่าง
สามารถดู SOURCE CODE ได้จาก jsfiddle ได้เลย
ส่วนค่าที่ใส่ทั้ง 8 ค่า ใน border-radius สามารถไปทำได้จากเว็บ https://9elements.github.io/fancy-border-radius/full-control.html
หวังว่าคงเป็นประโยชน์กับนักทำเว็บไซต์ และนำไปใช้ในการออกแบบเว็บของตนเองครับ