免费在线CSS border-radius预览工具。单独调整每个角并实时预览效果。一键复制代码。浏览器处理。
按 Ctrl+D 收藏此页面
圆角预览器是一款免费在线工具，可视化调整CSS border-radius属性。 单独或统一设置四个角并实时预览。 可创建圆形、椭圆和不对称形状。 在浏览器中处理，完全免费。 圆角预览可提升网页与UI设计以及前端开发的工作效率。 无需安装或登录，在电脑和手机的浏览器中即可直接使用。
对正方形元素应用border-radius: 50%即可创建完美圆形。将四个角都设为50%。
可以，border-radius可以按top-left、top-right、bottom-right、bottom-left的顺序设置四个独立值，创建独特的不对称形状。
按钮取 6~12px、卡片取 8~16px，在多数界面里都稳妥。比具体数值更重要的是一致性：同一屏里按钮和输入框圆角不同，就会显得凌乱。若卡片内嵌图片，内层元素的圆角半径要比外层略小，否则两条曲线看上去会对不齐。
50% 的含义是「取每条边的一半作为半径」，所以只要元素不是正方形，水平和垂直半径就不同，结果自然是椭圆。想要真正的圆，请把 width 和 height 设为相同值，或加上 aspect-ratio: 1。若要让按钮这类宽度随文字变化的元素成为胶囊形，用 9999px 这样的大固定值代替 50%，两端就会始终按高度形成半圆。