嘿，我明白你想要的效果了——就是让箭头的边框也跟着圆角走，和主容器的圆角风格统一对吧？你当前的方法已经有雏形了，但问题出在那个旋转的方块四个角都加了圆角，导致边框看起来有点别扭。

我给你调整一下样式，就能实现带圆角边框的箭头效果：

.box {
  width: 200px;
  height: 100px;
  position: relative;
  border-radius: 8px;
  background-color: #F6F4FF;
  border: 1px solid lightgray;
}

.box:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px; /* 微调这个值让箭头和主容器衔接更自然 */
  width: 16px;
  height: 16px;
  background-color: #F6F4FF;
  transform: translateX(-50%) rotate(45deg);
  /* 只保留箭头需要的两个边框 */
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  /* 只给箭头的"尖端"角加圆角，和主容器的圆角匹配 */
  border-bottom-right-radius: 8px;
  z-index: -1;
}

<div class="box"></div>

关键思路： #

• 不再给伪元素的四个角都设置圆角，而是只给旋转后箭头指向外侧的那个角（也就是原方块的右下角）设置和主容器一致的圆角值，这样就能让箭头的尖端呈现圆角效果。
• 只保留伪元素的右侧和底部边框，旋转之后这两个边框就会变成箭头的两侧边框，完美贴合主容器的边框，不会出现多余的边框线条。
• 微调bottom属性的值，确保箭头和主容器之间没有缝隙或者重叠过多，视觉上更连贯。

你可以根据实际需求调整圆角大小、箭头尺寸这些参数，让效果更符合你的设计要求~

备注：内容来源于stack exchange，提问作者Athus Vieira