CSS กรอบโค้งคลุมข้อความ ด้วย border-radius

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

ตัวอย่าง CSS กรอบโค้งคลุมข้อความ ด้วย border-radius

<style>
    .radius {
        width: 200px;
        text-align: center;
        border: solid 5px blue;
        padding: 5px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 30px;        
    }
</style>

<div class="radius">Hello Devdit</div>

ใช้คำสั่ง border-radius สำหรับสร้างกรอบโค้ง โดยคำสั่งนี้ต้องใช้ร่วมกับคำสั่ง border เพื่อสร้างเส้นกรอบ และสีกรอบ ตัวอย่างใช้คำสั่ง border: solid 5px blue คือ สร้างเส้นกรอบทึบ ขนาด 5px สีฟ้า และใช้คำสั่ง border-radius: 10px คือ ทำให้กรอบมีความโค้ง โดยมีระดับความโค้งมนเท่ากับ 10px