如何在 CSS 中添加边框？

border 是 CSS 中的一个简写属性，用于为元素添加边框。它允许我们指定框的边框。它设置边框的宽度、样式和颜色。这个 CSS 属性包含以下边框属性：

• border-width: border-width 属性用于设置边框的宽度。我们还可以使用预定义值 thin, medium, 和 thick 来设置边框的宽度。它设置边框的厚度。其默认值为 medium。
  此属性不能单独使用。它总是与其他边框属性（如“border-style”属性）一起使用来设置边框；否则，它将不起作用。
  边框的宽度可以对每个单独的边都不同。这可以通过使用 border-bottom-width、border-top-width、border-right-width 和 border-left-width 来实现。
• border-style: 此属性指定边框的样式。它定义了边框是实线、虚点线、虚线、双线、凹槽线还是其他可能的样式之一。不设置此属性（即不设置边框样式），其他任何边框属性都不会起作用。不指定 border-style，边框将是不可见的。这是因为此 CSS 属性的默认值为 none。
  与 border-width 类似，边框的样式可以对每个单独的边都不同。这可以通过使用属性 border-bottom-style、border-top-style、border-right-style 和 border-left-style 来实现。
• border-color: 它允许我们更改边框的颜色。我们可以使用颜色名称、RGB 值或十六进制值来设置颜色。与 border-width 和 border-style 类似，我们可以单独更改边框的颜色，即我们可以更改元素边框的底部、顶部、左侧和右侧的颜色。这可以通过使用属性 border-bottom-color、border-top-color、border-right-color 和 border-left-color 来实现。
  border-color 属性不能单独使用。它必须与其他边框属性（如“border-style”属性）一起使用来设置边框；否则，它将不起作用。

边框与轮廓

虽然边框和轮廓非常相似，但它们之间存在一些差异，如下所示：

• 使用轮廓时，我们无法为元素的四个边应用不同的轮廓宽度、样式和颜色，而在边框中，我们可以为元素的四个边应用提供的值。
• 边框是元素尺寸的一部分，而轮廓不是元素尺寸的一部分。这意味着，无论我们为元素应用多么厚的轮廓，其尺寸都不会改变。

让我们看一个示例来理解 border 属性。

示例

输出

现在，我们来看另一个同时使用 outline 和 border 属性的示例。

示例

输出