CSS3 四个值（分别指定每个角）

实例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 边框圆角实例</title>
    <style>
        .border-radius4-bg {
            width: 400px;
            height: 150px;
            background-color: #4a90e2;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            border-radius: 10px 20px 30px 40px;
        }
        
        .border-radius4-border {
            width: 400px;
            height: 150px;
            border: solid 3px #4a90e2;
            color: #4a90e2;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            border-radius: 10px 20px 30px 40px;
        }
        
        .border-radius4-image {
            width: 400px;
            height: 150px;
            background: url("/uploads/20250413/paper.gif") repeat;
            color: #252b3a;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    <h1>四个值（分别指定每个角）</h1>
    <div class="border-radius4-bg">四角不同半径<br>border-radius: 10px 20px 30px 40px;</div>
    <div class="border-radius4-border">四角不同半径<br>border-radius: 10px 20px 30px 40px;</div>
    <div class="border-radius4-image">四角不同半径<br>border-radius: 10px 20px 30px 40px;</div>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="zh-CN">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 边框圆角实例</title>
    <style>
        .border-radius4-bg {
            width: 400px;
            height: 150px;
            background-color: #4a90e2;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            border-radius: 10px 20px 30px 40px;
        }
        
        .border-radius4-border {
            width: 400px;
            height: 150px;
            border: solid 3px #4a90e2;
            color: #4a90e2;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            border-radius: 10px 20px 30px 40px;
        }
        
        .border-radius4-image {
            width: 400px;
            height: 150px;
            background: url("/uploads/20250413/paper.gif") repeat;
            color: #252b3a;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
​
<body>
    <h1>四个值（分别指定每个角）</h1>
    <div class="border-radius4-bg">四角不同半径<br>border-radius: 10px 20px 30px 40px;</div>
    <div class="border-radius4-border">四角不同半径<br>border-radius: 10px 20px 30px 40px;</div>
    <div class="border-radius4-image">四角不同半径<br>border-radius: 10px 20px 30px 40px;</div>
</body>
​
</html>