border-top-left-radius · CSS基础

## border-top-left-radius 属性 ## 属性定义及使用说明 border-top-left-radius属性定义了左上角的边框形状。 **提示:** 这个属性允许你为元素添加圆角边框！ JavaScript 语法:object object.style.borderTopLeftRadius="5px" * * * ## 语法 ``` border-top-left-radius: *length*|*%* \[*length*|*%*\]; ``` **注意:** border-top-left--radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。 | 值 | 描述 | | :-- | :-- | | *length* | 定义左上角的形状。 | | *%* | 使用%定义左上角的形状。 | * * * ## 实例--为div元素的左上角添加一个圆角边框： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { border:2px solid; padding:10px; background:#dddddd; border-top-left-radius:2em; -webkit-border-top-left-radius:2em; /* Safari */ } </style> </head> <body> <div>The border-top-left-radius property allows you to add a rounded border to the top-left corner.</div> </body> </html> ```