Table of contents

CSS Borders

CSS Borders play a significant role in web design by delineating elements and adding visual separation. CSS provides a range of properties to customize borders, including color, style, width, and more.

CSS Border Basics

The border property is a shorthand for setting the border width, style, and color of an element. You can use it to apply a border on all four sides of an element simultaneously.

Syntax

css
element {
  border: width style color;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border: 2px solid #000000;
        }
    </style>
</head>

<body>
    <div class="text">
        This div has a basic black border.
    </div>
</body>

</html>

CSS Border Width

The border-width property sets the width of the border. It can accept values in pixels (px), ems (em), or other CSS units.

Syntax

css
element {
  border-width: width;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border: 5px solid #007BFF;
        }
    </style>
</head>

<body>
    <div class="text">
        This div has a 5px wide border.
    </div>
</body>

</html>

CSS Border Style

The border-style property specifies the style of the border. Common values include solid, dashed, dotted, double, groove, ridge, inset, and outset.

Syntax

css
element {
  border-style: style;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border: 2px dashed #FF5733;
        }
    </style>
</head>

<body>
    <div class="text">
        This div has a dashed orange border.
    </div>
</body>

</html>

CSS Border Color

The border-color property sets the color of the border. You can use color names, hex codes, RGB, RGBA, HSL, or HSLA values.

Syntax

css
element {
  border-color: color;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border: 3px solid rgba(0, 255, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="text">
        This div has a semi-transparent green border.
    </div>
</body>

</html>

CSS Border Radius

The border-radius property rounds the corners of an element's border box. You can specify a single radius for all corners or individual radii for each corner.

Syntax

css
element {
  border-radius: radius;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border: 3px solid #FF5733;
            border-radius: 15px;
        }
    </style>
</head>

<body>
    <div class="text">
        This div has rounded corners.
    </div>
</body>

</html>

CSS Border Sides

You can apply different borders to each side of an element using the border-top, border-right, border-bottom, and border-left properties.

Syntax

css
element {
  border-top: width style color;
  border-right: width style color;
  border-bottom: width style color;
  border-left: width style color;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border-top: 2px solid #FF5733;
            border-right: 4px dashed #33FF57;
            border-bottom: 6px dotted #3357FF;
            border-left: 8px double #FF33A5;
        }
    </style>
</head>

<body>
    <div class="text">
        This div has different border 
        styles on each side.
    </div>
</body>

</html>

CSS Border Image

The border-image property allows you to use an image as the border of an element. It is a shorthand for several border-image properties.

Syntax

css
element {
  border-image: url('path-to-image') slice-width width;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            width: 200px;
            height: 200px;
            border: 10px solid;
            border-image: url('img.png') 30 round;
        }
    </style>
</head>

<body>
    <div class="text">
        This div has an image border.
    </div>
</body>

</html>

CSS Shorthand for Borders

The border shorthand property combines the width, style, and color of the border in one line.

Syntax

css
element {
  border: width style color;
}

Example

html
<!DOCTYPE html>
<html>

<head>
    <style>
        .text {
            border: 4px solid #FF5733;
        }
    </style>
</head>

<body>
    <div class="text">
        This div uses the border
        shorthand property.
    </div>
</body>

</html>

CSS

Related Articles