ตัวสร้าง Border Radius CSS

CSS border-radius เป็นคุณสมบัติที่ทำให้มุมของขอบนอกขององค์ประกอบมนขึ้น คุณสามารถตั้งค่าแต่ละมุมอย่างอิสระโดยใช้ค่าหนึ่งถึงสี่ค่า

ตั้งค่า border-radius เป็น 50% บนองค์ประกอบสี่เหลี่ยมจัตุรัส (ความกว้างและความสูงเท่ากัน) สำหรับวงรี ใช้ border-radius: 50% บนองค์ประกอบสี่เหลี่ยมผืนผ้า

Border-radius รองรับ px, %, em, rem, vw, vh และหน่วยความยาว CSS อื่นๆ เปอร์เซ็นต์จะสัมพันธ์กับมิติขององค์ประกอบ

แบบย่อตามรูปแบบ: ซ้ายบน ขวาบน ขวาล่าง ซ้ายล่าง ค่าเดียวใช้กับทุกมุม สองค่าตั้งค่าซ้ายบน/ขวาล่าง และขวาบน/ซ้ายล่าง

ได้ โดยใช้ไวยากรณ์เครื่องหมายทับ (/) คุณสามารถกำหนดรัศมีแนวนอนและแนวตั้งแยกต่างหาก ตัวอย่าง border-radius: 50% / 100px

Border-radius ทำงานกับองค์ประกอบ HTML ส่วนใหญ่รวมถึง div, button, img และ input แต่อาจไม่ตัดเนื้อหาที่ล้นโดยไม่มีการตั้งค่า overflow: hidden

ได้ โดยการรวมค่ารัศมีที่แตกต่างกันสำหรับแต่ละมุม คุณสามารถสร้างรูปเม็ดยา วงรี ใบไม้ และรูปทรงอินทรีย์ที่กำหนดเอง

ได้ border-radius รองรับในทุกเบราว์เซอร์สมัยใหม่รวมถึง Chrome, Firefox, Safari, Edge และเบราว์เซอร์มือถือ

ตั้งค่า border-radius เป็นค่าที่เท่ากับหรือมากกว่าครึ่งหนึ่งของความสูงขององค์ประกอบ สำหรับปุ่มสูง 40px ใช้ border-radius: 20px หรือสูงกว่า

ได้ border-radius ตัดพื้นหลัง ภาพพื้นหลัง และขอบขององค์ประกอบ พื้นหลังจะตามมุมมนโดยอัตโนมัติ

ได้ border-radius สามารถทำให้เคลื่อนไหวได้ด้วยการเปลี่ยนผ่านและแอนิเมชัน CSS คุณสามารถเปลี่ยนระหว่างค่ารัศมีที่แตกต่างกันอย่างราบรื่น

ได้ border-radius ทำงานได้ดีกับ CSS transform เช่น rotate, scale และ translate

ใช้ border-radius: 50% กับองค์ประกอบสี่เหลี่ยมจัตุรัสที่มีความกว้างและความสูงเท่ากัน แล้วเพิ่มคุณสมบัติ border

คุณสมบัติแต่ละตัวเช่น border-top-left-radius ให้คุณควบคุมแต่ละมุมได้อย่างแม่นยำ แบบย่อให้คุณตั้งค่าหลายมุมในคำประกาศเดียว