border is a shorthand property that can be used to combine the following attributes:

• border-width
• border-style
• border-color

When using the border attribute, you must state all three values, width, style and color. The order does not matter. You cannot state multiple values for color, style or width with the shorthand property of border as you can by using the individual properties of border-color, border-style or border-width.

See border-style, border-width and border-color to find out more about how to state these values.

There is also a multitude of other attributes to style borders:

• border-top
• border-bottom
• border-right
• border-left
• border-radius
• border-top-right-radius
• border-top-left-radius
• border-bottom-right-radius
• border-bottom-right-radius

• border-image
• border-left-image
• border-right-image
• border-top-image
• border-bottom-image
• border-corner-image
• border-top-left-image
• border-top-right-image
• border-bottom-left-image
• border-bottom-right-image

• border-fit
• border-image-transform
• border-break
• box-shadow
• border-top-color
• border-left-color
• border-bottom-color
• border-right-color
• etc.

By default, there will be no border on an element.

If there is a border on a parent element, the child or ancestors of that element will not inherit the border properties.

The border will extend around the outside of the element and include the padding area, but not the margin area.

An element with the display set to block will extend across the entire width of the contain element. The border will be around this entire area.

An element with the display set to inline will only extend to the width of that element and the border will only be around this area.