คุณสมบัติ border-radius ใน CSS ช่วยให้นักพัฒนาเว็บสามารถปรับแต่งความโค้งมนของมุมกล่องข้อความหรือองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างอิสระ เครื่องมือสร้าง Border Radius นี้ช่วยให้คุณปรับแต่งค่าความโค้งของแต่ละมุมแยกกันหรือเชื่อมโยงเข้าด้วยกัน พร้อมทั้งรองรับการทำงานในโหมดวงรีเพื่อสร้างรูปทรงที่ซับซ้อนและเป็นธรรมชาติ โดยระบบจะคำนวณและสร้างโค้ด CSS ให้คุณนำไปใช้งานได้ทันที
การประมวลผลทั้งหมดเกิดขึ้นภายในเครื่องของคุณ ทุกมุมจะถูกวาดขึ้นในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดข้อมูลที่คุณตั้งค่าไว้ไปยัง BroBroGo
การควบคุมมุมและหน่วยวัดใน CSS
การกำหนดความโค้งมนของมุมกล่องจะอิงตามเข็มนาฬิกา โดยเริ่มจากมุมบนซ้าย มุมบนขวา มุมล่างขวา และมุมล่างซ้าย เครื่องมือนี้มีแถบเลื่อนที่ปรับค่าได้ตั้งแต่ 0 ถึง 100 ซึ่งเริ่มต้นที่ค่า 24 ส่งผลให้ได้โค้ดเริ่มต้นเป็น border-radius: 24px;
คุณสามารถเลือกหน่วยวัดที่เหมาะสมกับการใช้งานได้ 2 รูปแบบ:
- หน่วยพิกเซล (px): มุมจะโค้งมนตามค่าคงที่ที่กำหนดไว้โดยไม่ขึ้นกับขนาดของกล่อง เหมาะสำหรับการควบคุมความโค้งที่แน่นอน เช่น ขอบปุ่มหรือการ์ดข้อมูล
- หน่วยเปอร์เซ็นต์ (%): ความโค้งมนจะคำนวณเทียบกับขนาดของกล่อง โดยเปอร์เซ็นต์ในแนวนอนจะอิงตามความกว้าง และเปอร์เซ็นต์ในแนวตั้งจะอิงตามความสูง การใช้หน่วยเปอร์เซ็นต์ช่วยให้การออกแบบมีความยืดหยุ่นตามขนาดหน้าจอ (Responsive Design)
โหมดการทำงานและตัวเลือกการปรับแต่ง
เครื่องมือนี้มีตัวเลือกในการควบคุมโครงสร้างของมุม 2 รูปแบบหลัก เพื่อให้ตอบโจทย์ทั้งการใช้งานทั่วไปและการสร้างสรรค์รูปทรงอิสระ:
- การเชื่อมโยงมุม: เมื่อเปิดใช้งาน ตัวเลือก "เชื่อมโยงทุกมุม" จะแสดงแถบเลื่อนเดียวในชื่อ "ทุกมุม" เพื่อควบคุมทั้ง 4 มุมพร้อมกัน เมื่อปิดใช้งาน แถบเลื่อนจะแยกออกเป็น 4 ตัว ได้แก่ "บนซ้าย", "บนขวา", "ล่างขวา" และ "ล่างซ้าย" เพื่อให้คุณปรับแต่งแต่ละมุมได้อย่างอิสระ
- มุมแบบวงรี: เมื่อปิดโหมดนี้ ทุกมุมจะเป็นส่วนโค้งแบบหนึ่งส่วนสี่ของวงกลมที่มีรัศมีเดียว แต่เมื่อเปิดใช้งาน "มุมแบบวงรี" แต่ละมุมจะมีแถบเลื่อนแยกย่อยเป็น "แนวนอน" และ "แนวตั้ง" ช่วยให้สามารถกำหนดรัศมีในแต่ละแกนให้แตกต่างกันได้ เครื่องมือสร้างนี้จะเขียนโค้ดในรูปแบบสแลชสองค่า (เช่น
border-radius: 10px / 20px;) ให้โดยอัตโนมัติ และจะกลับไปใช้รูปแบบสั้นเมื่อมุมกลับมาโค้งมนเท่ากันอีกครั้ง
การสร้างรูปทรงเฉพาะตัวด้วยพรีเซ็ต
นอกเหนือจากการลากแถบเลื่อนด้วยตนเองแล้ว คุณยังสามารถใช้ปุ่มพรีเซ็ตเพื่อเปลี่ยนรูปทรงของกล่องได้อย่างรวดเร็ว:
- เหลี่ยม (Sharp): ตั้งค่ามุมทั้งหมดให้เป็น 0 เพื่อให้ได้ขอบเหลี่ยมมุมฉาก
- โค้งมน (Rounded): ปรับมุมให้มีความโค้งมนในระดับที่เหมาะสมสำหรับการออกแบบทั่วไป
- วงกลม (Circle): ตั้งค่าทุกมุมเป็น 50% ซึ่งจะเปลี่ยนกล่องสี่เหลี่ยมจัตุรัสให้กลายเป็นวงกลมที่สมบูรณ์แบบทันที
- หยดน้ำ (Blob): ใช้โหมดวงรีเพื่อสร้างรูปทรงที่ดูนุ่มนวลและเป็นธรรมชาติเหมือนหยดน้ำ
- ใบไม้ (Leaf): ปรับมุมตรงข้ามให้โค้งมนในขณะที่มุมที่เหลือยังคงความแหลมคมไว้
วิธีนำโค้ด CSS ไปใช้งาน
เมื่อคุณปรับแต่งรูปทรงในส่วนแสดงผลตัวอย่างจนได้ผลลัพธ์ที่ต้องการแล้ว โค้ด CSS จะถูกสร้างขึ้นโดยอัตโนมัติภายใต้หัวข้อ "CSS" คุณสามารถคลิกปุ่ม "คัดลอก CSS" เพื่อนำโค้ดไปวางในไฟล์สไตล์ชีตของคุณได้ทันที
ตัวอย่างการนำไปใช้ใน CSS:
.custom-box {
/* วางโค้ดที่คัดลอกจากเครื่องมือสร้าง */
border-radius: 50px 20px 50px 20px;
}
คำถามที่พบบ่อย (FAQ)
การทำงานของมุมทั้งสี่และการเลือกใช้ px กับ % เป็นอย่างไร? แถบเลื่อนทั้งสี่จะควบคุมมุมตามเข็มนาฬิกา ได้แก่ บนซ้าย, บนขวา, ล่างขวา และล่างซ้าย หากใช้หน่วยพิกเซล (px) มุมจะโค้งมนตามค่าคงที่ที่กำหนด แต่หากใช้หน่วยเปอร์เซ็นต์ (%) ความโค้งมนจะเทียบกับขนาดของกล่อง โดยเปอร์เซ็นต์ในแนวนอนจะอิงตามความกว้าง และเปอร์เซ็นต์ในแนวตั้งจะอิงตามความสูง ดังนั้นค่า 50% จะเปลี่ยนสี่เหลี่ยมจัตุรัสให้กลายเป็นวงกลมพอดี
โหมดวงรี (Elliptical) มีไว้เพื่ออะไร? หากปิดโหมดนี้ ทุกมุมจะเป็นส่วนโค้งแบบหนึ่งส่วนสี่ของวงกลมที่มีรัศมีเดียว แต่หากเปิดใช้งาน แต่ละมุมจะมีรัศมีแนวนอนและแนวตั้งแยกกัน ซึ่งช่วยให้คุณสร้างรูปทรงที่ดูนุ่มนวลและเป็นธรรมชาติเหมือน "หยดน้ำ" (Blob) ได้ เครื่องมือสร้างนี้จะเขียนโค้ดในรูปแบบสแลชสองค่าให้คุณโดยอัตโนมัติ และจะกลับไปใช้รูปแบบสั้นเมื่อมุมกลับมาโค้งมนเท่ากันอีกครั้ง
จะสร้างวงกลมที่สมบูรณ์แบบหรือรูปทรงแคปซูลได้อย่างไร? เชื่อมโยงมุมทั้งหมดเข้าด้วยกัน เปลี่ยนหน่วยเป็นเปอร์เซ็นต์ (%) แล้วตั้งค่าเป็น 50% รูปสี่เหลี่ยมจัตุรัสก็จะกลายเป็นวงกลมทันที สำหรับปุ่มรูปทรงแคปซูล (Pill) ให้ใช้หน่วยพิกเซล (px) เช่นเดิม แล้วลากมุมใดมุมหนึ่งให้เกินครึ่งหนึ่งของความสูงของปุ่ม ขอบด้านข้างจะยังคงโค้งมนอย่างสมบูรณ์ไม่ว่าปุ่มจะกว้างเท่าใดก็ตาม โดยคุณสามารถใช้พรีเซ็ต Circle เพื่อตั้งค่าแบบแรกได้ในคลิกเดียว