Borders

In this tutorial, I will be showing you all what you need to know about borders and how you can use various border properties to style borders that you apply to your element.

Border is a decorative element or design style that surrounds the content of an object (text, image or other HTML elements)

Border Properties

BORDER STYLE

The border-style property is used to set the style of the border. Its values include:

• dotted
• dashed
• solid
• double
• groove - 3D grooved border; the effect depends on the color of the border style.
• ridge - 3D ridge border; the effect depends on the color of the border style.
• inset - 3D inset border; the effect depends on the color of the border style.
• outset - 3D outset border; the effect depends on the color of the border style.

BORDER WIDTH

The border-width property is used to set the thickness or thinness (weight) of the border.

BORDER COLOR

The border-color property is used to specify the color of the border-style value.

Individual Sides (Border Style)

You can set border-style property for only the right, left, top or bottom side of an element.

Border Style Property (Individual Sides)

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Individual Sides (Shorthand)

• border-style: top | right | bottom | left
TRY IT OUT YOURSELF
• border-style: top | right/left | bottom
TRY IT OUT YOURSELF
• border-style: top/bottom | right/left
TRY IT OUT YOURSELF
• border-style: top/right/bottom/left
TRY IT OUT YOURSELF

Individual Sides (Border Width)

You can set border-width property for only the right, left, top or bottom side of an element.

Border Width Property (Individual Sides)

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Individual Sides (Shorthand)

• border-width: top | right | bottom | left
TRY IT OUT YOURSELF
• border-width: top | right/left | bottom
TRY IT OUT YOURSELF
• border-width: top/bottom | right/left
TRY IT OUT YOURSELF
• border-width: top/right/bottom/left
TRY IT OUT YOURSELF

Individual Sides (Border Color)

You can set border-color property for only the right, left, top or bottom side of an element.

Border Color Property (Individual Sides)

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Individual Sides (Shorthand)

• border-color: top | right | bottom | left
TRY IT OUT YOURSELF
• border-color: top | right/left | bottom
TRY IT OUT YOURSELF
• border-color: top/bottom | right/left
TRY IT OUT YOURSELF
• border-color: top/right/bottom/left
TRY IT OUT YOURSELF

Border Properties Shorthand

The border properties shorthand follows this order:

• border: border-width | border-style | border-color;
TRY IT OUT YOURSELF

BORDER RADIUS

The border-radius property is used to set the roundness or sharpness of the border edges.

Individual Sides (Border Radius)

You can set border-radius property for only the top-left, top-right, bottom-right, bottom-left edge of an element.

Border Color Property (Individual Sides)

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

Individual Sides (Shorthand)

• border-radius: top-left | top-right | bottom-right | bottom-left
TRY IT OUT YOURSELF
• border-radius: top-left | top-right/bottom-left | bottom-right
TRY IT OUT YOURSELF
• border-radius: top-left/bottom-left | top-right/bottom-right
TRY IT OUT YOURSELF
• border-radius: top-left/top-right/bottom-right/bottom-left
TRY IT OUT YOURSELF

BORDER IMAGE

The border-image property is used to set image as the border of an element. Here the border-style property must be declared first before the border-image property, else the image will not show.

Border Image Properties

BORDER IMAGE SOURCE

The border-image-source property is used to specify the address/location of the image to be used as border for the element.

BORDER IMAGE WIDTH

The border-image-width property is used to set the thickness or thinness (weight) of the border image.

BORDER IMAGE SLICE

The border-image-slice property is used to set how to slice (cut off some parts) the image. Image is always sliced into nine (9) parts: four corners, four edges and lastly the middle.

BORDER IMAGE OUTSET

The border-image-outset property is used to set the amount of image area that will extend beyond the border box.

BORDER IMAGE REPEAT

The border-image-repeat property is used to specify whether the border-image should be repeated, rounded, spaced or stretched.