CSS实现元素右上角圆角：非SVG方案求助

先排查border-top-right-radius失效的常见原因 #

• 元素未设置overflow: hidden，内部内容溢出掩盖了圆角
• 元素边框样式与背景色一致，导致圆角视觉上不明显
• 父元素背景覆盖了当前元素的圆角区域

方案1：用伪元素实现屏幕视口级右上角圆角 #

如果是要给整个页面的右上角做圆角，可通过body伪元素定位实现：

body {
  margin: 0;
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  border-bottom-left-radius: 120px;
  background: #ffffff; /* 匹配页面背景色 */
}

方案2：使用clip-path精确裁剪元素圆角 #

直接通过裁剪属性实现元素右上角圆角，不受其他样式干扰：

.square {
  width: 600px;
  height: 600px;
  background: black;
  /* inset(上 右 下 左 round 左上 右上 右下 左下) */
  clip-path: inset(0 0 0 0 round 0 120px 0 0);
}

方案3：修正border-radius写法 #

确保圆角属性的正确声明，简写形式更直观：

.square {
  width: 600px;
  height: 600px;
  background: black;
  border-radius: 0 120px 0 0; /* 左上 右上 右下 左下 */
}

若仍失效，检查是否有transform属性冲突，或确认浏览器兼容性（现代浏览器均支持border-radius）。

内容的提问来源于stack exchange，提问作者jejam