【HTML+CSS】圆角矩形border-radius

圆角矩形

语法：border-radius：数值/百分比

• 一个值：四个角
• 两个值：左上角右下角 右上角左下角
• 三个值：左上角 右上角左下角 右下角
• 四个值：左上角 右上角 右下角 左下角

单边圆角语法：border-上/下方位词-左/右方位词-radius：数值/百分比

• 左上角：border-top-left-radius
• 右上角：border-top-right-radius
• 右下角：border-bottom-right-radius
• 左下角：border-bottom-left-radius

取消圆角

• border-radius：0；

打印圆形、椭圆形、胶囊形案例

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50%;
        }
        .box3{
            width: 200px;
            height: 100px;
            background-color: orange;
            border-radius: 50px;
        }
</style>
<div>
        <!-- 圆形 -->
        <div class="box1"></div>
        
        <!-- 椭圆形 -->
        <div class="box2"></div>
        
        <!-- 胶囊形 -->
        <div class="box3"></div>
</div>

💡执行结果截图