CSS Borders

CSS Borders help define the boundary of an element. They can be customized using different styles, colors, widths, rounded corners, images, gradients, and even animations.

Table of Contents

1. Understanding CSS Borders Properties

A border consists of three main components:

Border Width (border-width): Defines the thickness of the border.
Border Style (border-style): Specifies the type of border (solid, dashed, dotted, etc.).
Border Color (border-color): Defines the color of the border.

Syntax:

selector {
  border: <width> <style> <color>;
}

Example: Basic Border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Border</title>
    <style>
        .box {
            border: 3px solid black;
            padding: 20px;
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">Basic Border</div>
</body>
</html>

HTML

output:

Basic Border

🔹 This creates a 3px solid black border around the .box element.

2. CSS Border Styles

CSS offers various styles for borders:

Style	Description
`solid`	A single solid line
`dashed`	A series of dashes
`dotted`	A series of dots
`double`	Two solid lines with space in between
`groove`	A 3D grooved effect
`ridge`	A 3D ridged effect
`inset`	Makes the element appear embedded
`outset`	Makes the element appear raised
`none`	No border
`hidden`	Similar to `none`, used in table elements

Example: Different Border Styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Styles</title>
    <style>
        .solid { border: 4px solid red; }
        .dashed { border: 4px dashed blue; }
        .dotted { border: 4px dotted green; }
        .double { border: 4px double black; }
        .groove { border: 4px groove purple; }
        .ridge { border: 4px ridge orange; }
        .inset { border: 4px inset brown; }
        .outset { border: 4px outset gray; }

        .box {
            padding: 20px;
            margin: 10px;
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box solid">Solid</div>
    <div class="box dashed">Dashed</div>
    <div class="box dotted">Dotted</div>
    <div class="box double">Double</div>
    <div class="box groove">Groove</div>
    <div class="box ridge">Ridge</div>
    <div class="box inset">Inset</div>
    <div class="box outset">Outset</div>
</body>
</html>

HTML

output:

Solid

Dashed

Dotted

Double

Groove

Ridge

Inset

Outset

🔹 This example demonstrates all the different border styles.

3. Border Width

Border width defines how thick or thin the border appears. It can be set using:

Exact units: px, em, rem, %, vh, vw, etc.
Keywords: thin, medium, thick.

Example: Different Border Widths

.thin-border { border: thin solid black; }
.medium-border { border: medium solid blue; }
.thick-border { border: thick solid red; }
.custom-width-border { border: 10px solid purple; }

CSS

4. Individual Border Sides

You can set borders only on specific sides using:

border-top
border-right
border-bottom
border-left

Example: Borders on Different Sides

.top-border { border-top: 5px solid red; }
.right-border { border-right: 5px dashed blue; }
.bottom-border { border-bottom: 5px double green; }
.left-border { border-left: 5px dotted black; }

CSS

5. Border Radius (Rounded Corners)

The border-radius property creates rounded corners.

Example: Rounded Borders

.rounded {
    border: 4px solid blue;
    border-radius: 15px; /* Rounded corners */
}

.circle {
    border: 4px solid red;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

CSS

🔹 Setting border-radius: 50% makes an element circular.

6. Border Image

CSS allows you to use an image as a border.

Example: Border Image

.border-img {
    border: 20px solid transparent;
    border-image: url('border.png') 30 round;
}

CSS

🔹 The border-image property applies an image as the border.

7. Gradient Border

Using border-image or background-clip, you can create gradient borders.

Example: Gradient Border

.gradient-border {
    border: 5px solid transparent;
    border-image: linear-gradient(to right, red, blue);
    border-image-slice: 1;
}

CSS

8. Animated Borders

Borders can be animated using @keyframes.

Example: Animated Border

@keyframes borderAnimation {
    0% { border-color: red; }
    50% { border-color: blue; }
    100% { border-color: green; }
}

.animated-border {
    border: 5px solid red;
    animation: borderAnimation 2s infinite;
}

CSS

🔹 This animates the border color from red → blue → green in a loop.

9. Shorthand Property

Instead of writing separate properties, use shorthand:

border: 5px solid red; /* Width, Style, and Color */

CSS

🔹 This is equivalent to:

border-width: 5px;
border-style: solid;
border-color: red;

CSS

Conclusion

With CSS borders, you can:

Use different styles like solid, dashed, dotted, and more.
Apply borders to specific sides.
Create rounded corners with border-radius.
Use images and gradients as borders.
Animate borders with CSS.