CSS border-top-width 属性

CSS 属性 border-top-width 用于设置元素顶部边框的宽度。它可以接受不同类型的值来定义边框的宽度，如像素（px）、百分比（%）、em 等。

语法

selector {
  border-top-width: value;
}

• value：可以是长度值（如 px、em）、百分比值等。

可用值

• medium：默认值，通常为中等宽度的边框。
• thin：比默认值更细的边框。
• thick：比默认值更粗的边框。
• <length>：指定具体的长度值，如 px, em, rem 等。
• <percentage>：相对于父元素宽度的百分比值。

示例

// www.javascriptcn.com code example
.border-example {
  border-top-width: 2px;
}

.border-example-thin {
  border-top-width: thin;
}

.border-example-thick {
  border-top-width: thick;
}

.border-example-percentage {
  border-top-width: 10%;
}

在上面的示例中，.border-example 类将元素的顶部边框宽度设置为 2px，.border-example-thin 类将元素的顶部边框宽度设置为比默认值更细的边框，.border-example-thick 类将元素的顶部边框宽度设置为比默认值更粗的边框，.border-example-percentage 类将元素的顶部边框宽度设置为相对于父元素宽度的 10%。

这样，通过设置 border-top-width 属性，可以轻松地控制元素顶部边框的宽度，从而实现更加灵活的页面布局设计。