Tutorial Manthra

The CSS border properties allow you to specify the style, width, and color of an element’s border. Borders are essential for defining the edges of containers, buttons, and input fields.

Individual Border Properties

A border has three main characteristics that you can control:

Border Style (border-style)

This is the most important property. A border will not show up unless a style is defined.

• Values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
• Example: p { border-style: solid; }

Border Width (border-width)

Sets the thickness of the border.

• Values: Specific sizes (px, em, rem) or keywords (thin, medium, thick).
• Example: div { border-width: 5px; }

Border Color (border-color)

Sets the color of the border.

• Values: Color names, HEX, RGB, HSL, or currentcolor.
• Example: button { border-color: #3498db; }

Example

.border-style-example {
  border-width: 5px;
  border-style: dotted;
  border-color: red;
}

Output

Border – Individual Sides

You can specify different borders for each side (Top, Right, Bottom, Left).

Example

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Output

Border Shorthand Property

To save code, you can define all the individual border properties in one single property: border.

Syntax Order: border: [width] [style] [color];

Example Code:

.bo-box {
  border: 2px solid red;
}

/* You can also style just one side using shorthand */
.bo-card {
  border-bottom: 5px solid green;
}

Output

Rounded Borders (border-radius)

The border-radius property is used to add rounded corners to an element.

• Values: px, %, or em.
• Circle Tip: To make a square element perfectly circular, set border-radius: 50%;.

Example Code:

.bo-button {
  border: 2px solid blue;
  border-radius: 8px; /* Slightly rounded corners */
}

.bo-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Perfect circle */
}

Output

Override border Shorthand Property

You can override the border shorthand property by using any individual border property below it. See the example code below.

bo-override {
    border: 5px solid gray;
    border-bottom-width: 20px;
}

Output

Applying Borders to Inline Elements

Similar to Block elements border can be applied to inline elements.

<p> 
        Here the border is applied to <span style="border: 5px solid red;>inline elements span</span> inside a paragraph element
 </p>

Output

Here the border is applied to border-image Property

To set images as borders for another element like div, span, body, paragraph, etc, you can use the border-image property. First you need to declare the border-style property before providing an image source, else no image will be displayed as the border.

Example code

image-bo{
            background-color: #FF0000;
            border: 30px solid transparent;
            border-image: url(https://www.tutorialmanthra.com/wp-content/uploads/flower-image.jpg) 40;
            padding: 20px;
        }

Output

Summary Table: All CSS Border Properties

All the css border properties are listed in the table below: