css边框内凹圆角，解决优惠券的边框问题-优快云博客

本文介绍如何使用CSS的径向渐变属性创建具有内凹圆角效果的边框，通过调整gradient的参数可以实现不同的视觉效果，包括左上、右上、右下和左下四个方向的内凹圆角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于css边框内凹圆角，找了好久才找到的

<html
<head>
    <title>无标题页</title>
    <style>
		body{
			background:#999
		}
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,#fff 50%);
}

/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,#fff 50%);
}

/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,#fff 50%);
}

.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,#fff 50%);
}
.ellipse {
   height: 100px;
   width: 100px;
   background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}    

</style>
</head>
<body>
  <div class='raidal4'></div>
<div class='raidal1'></div>
	<div class='raidal3'></div>
<div class='raidal2'></div>


</body>
</html>