CSS Borders - CodeMaster Academy

Introduction to Borders

In CSS, borders are lines that go around elements, positioned between the padding and the margin as part of the CSS Box Model. Borders are used to visually separate elements, create outlines, or simply add decorative flair.

You can control three main aspects of a border: its **width**, **style**, and **color**.

🖼️ Visual Aid

Remember the Box Model: Content → Padding → **Border** → Margin. Borders are the "frame" of your element.

Border Width

The `border-width` property specifies the thickness of the border. You can use predefined values like `thin`, `medium`, `thick`, or specify a length in pixels (`px`), ems (`em`), etc.

.box-thin {
    border-width: thin;
}
.box-medium {
    border-width: medium;
}
.box-thick {
    border-width: thick;
}
.box-10px {
    border-width: 10px;
}

Example: Border Width

This box has a 2px solid border.

This box has a 'thin' solid border.

This box has a 5px solid border.

Border Style

The `border-style` property defines the appearance of the border. There are several common values:

`none`: No border (default).
`solid`: A single, solid line.
`dotted`: A border made of dots.
`dashed`: A border made of dashes.
`double`: A double border. The width of the two lines and the space between them equals the `border-width` value.
`groove`: A 3D grooved border.
`ridge`: A 3D ridged border.
`inset`: A 3D inset border.
`outset`: A 3D outset border.

.dotted-border {
    border-style: dotted;
}
.dashed-border {
    border-style: dashed;
}
.double-border {
    border-style: double;
}

Example: Border Style

Dotted border

Dashed border

Double border

Groove border

Ridge border

Border Color

The `border-color` property sets the color of the border. You can use color names (e.g., `red`), hexadecimal codes (e.g., `#FF0000`), RGB values (e.g., `rgb(255,0,0)`), or HSL values.

.red-border {
    border-color: red;
}
.hex-border {
    border-color: #336699;
}

Example: Border Color

Red border

Green border

Border Shorthand Property

You can set all three border properties (`width`, `style`, `color`) in a single shorthand property: `border`. The order typically doesn't matter, but convention is `width style color`.

.shorthand-box {
    border: 2px solid blue;
}
/* This is equivalent to: */
.shorthand-box-expanded {
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

Example: Border Shorthand

This box uses the border shorthand property.

Individual Border Sides

You can also apply borders to individual sides of an element using specific properties:

`border-top`: Sets top border properties.
`border-right`: Sets right border properties.
`border-bottom`: Sets bottom border properties.
`border-left`: Sets left border properties.

.individual-borders {
    border-top: 2px solid red;
    border-right: 4px dotted green;
    border-bottom: 6px dashed blue;
    border-left: 8px double purple;
}

Example: Individual Borders

This box has different borders on each side.

Border Radius

The `border-radius` property allows you to create **rounded corners** for an element's border. You can specify a single value for all corners or individual values for each corner.

.rounded-box {
    border-radius: 10px; /* All corners rounded by 10px */
}
.custom-corners {
    border-radius: 10px 0 20px 0; /* top-left, top-right, bottom-right, bottom-left (clockwise) */
}
.circle {
    border-radius: 50%; /* Makes a perfect circle if width and height are equal */
}

Example: Border Radius

Rounded

Custom

Circle