CSS圆角边框生成器

左上角(px):
右上角(px):
右下角(px):
左下角(px):

什么是CSS圆角边框生成器

CSS圆角边框生成器提供了一个生成css边框半径的工具,可以输入四个方向的角值来查看效果和生成CSS代码。

CSS3 border-radius 属性

属性描述
border-radius定义元素边框半径
border-top-left-radius属性定义左上角的半径。
border-top-right-radius属性定义右上角的半径。
border-bottom-right-radius属性定义右下角的半径。
border-bottom-left-radius属性定义左下角的半径。

我们的工具使用第一种形式,它是其他语法的简写。例如:

border-radius: 10px 10px 10px 10px; 

第一个值应用于左上角,第二个值应用于右上角,第三个值应用于右下角,第四个值应用于左下角。

如何使用CSS圆角边框生成器?

  1. 设置左上(px) 右上(px) 右下(px) 左下(px)这些属性值
  2. 生成的代码和效果将显示在左侧区域。
  3. 点击“复制”按钮复制您的css边框半径代码。