Exploring Border Properties in CSS: Styling Element Borders

In CSS, border properties are used to define the style, width, color, and radius of the borders around elements. Borders provide a visual distinction and separation between elements on a web page.

The border property in CSS is used to style the border of an element. This property is a combination of three other properties border-width, border-style, and border-color as can be used as a shorthand notation for these three properties. It sets or returns the border-width, border-style, border-color Properties

The border-width specifies the width of an element.
The border-style specifies the styling effect of an element.
The border-color specifies the color of an element.

border-style

Specifies the style of the border, such as solid, dashed, dotted, double, or none.

Example

div {
  border-style: double;
}

border-width

Sets the width of the border. It can be specified in pixels, ems, or other valid CSS length units.

Example

div {
  border-width: 2px;
}

border-color

Defines the color of the border.

Example

div {
  border-color: #ff1c1c;
}

border-radius

Sets the radius of the border corners, creating rounded corners for the element's border.

Example

div {
  border-radius: 7px;
}

border (Shorthand Property)

A shorthand property that combines border-width, border-style , and border-color .

div {
  border: 2px solid #0080ff;
}

Output

border (Individual Property)

border-top, border-right, border-bottom, border-left: Individual properties to set the border style, width, and color for specific sides of an element's border.

div {
  border-top: 1px dashed #0080ff;
  border-right: 2px solid #ff0000;
  border-bottom: 1px dotted #0000ff;
  border-left: 2px double #ff8000;
}

Output

Border width, style, and color individually:

This sets the border width to 2px, the border style to dashed, and the border color to red. You can adjust these values accordingly.

div {
  border-top: 1px dashed #0080ff;
  border-right: 2px solid #ff0000;
  border-bottom: 1px dotted #0000ff;
  border-left: 2px double #ff8000;
}

Output

Border width in shorthand form:

This shorthand notation allows you to set the border widths for all four sides in a clockwise order: top, right, bottom, left.

border-width: 2px 1px 3px 1px;

If you provide only two values, the first value represents the top and bottom border widths, and the second value represents the right and left border widths.

border-width: 2px 1px;

If you provide three values, the first value represents the top border width, the second value represents the right and left border widths, and the third value represents the bottom border width.

border-width: 2px 1px 3px;

Also If you provide individual values

border-top-width:2px;
border-right-width:3px;
border-bottom-width:1px;
border-left-width:5px;

Border style in shorthand form:

This shorthand notation allows you to set the border styles for all four sides in a clockwise order: top, right, bottom, left.

border-style: solid dashed double dotted;

If you provide only two values, the first value represents the top and bottom border styles , and the second value represents the right and left border styles .

border-style: solid dashed;

If you provide three values, the first value represents the top border style, the second value represents the right and left border styles, and the third value represents the bottom border style.

border-style: solid dashed double;

Also If you provide individual values

border-top-style:dashed;
border-right-style:solid;
border-bottom-style:double;
border-left-style:dotted;

Border color in shorthand form:

This shorthand notation allows you to set the border colors for all four sides in a clockwise order:top, right, bottom, left.

border-color: red green blue orange;

If you provide only two values, the first value represents the top and bottom border colors, and the second value represents the right and left border colors.

border-color: red green;

If you provide three values,the first value represents the top border color, the second value represents the right and left border colors, and the third value represents the bottom border color.

border-color: red green blue;

Also If you provide individual values

border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orange;

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 200px;
            width:200px;
            border:10px groove red;
            border-left-width:20px ;
            border-left-style:dashed ;
            border-top-width:15px ;
            border-bottom-color:purple ;
            margin-top: 100px;
            margin-left: 200px;
        }
        .box2{
            height: 200px;
            width:200px;
            border:10px double red;
            border-radius: 10%;
            margin-top: 100px;
            margin-left: 200px;
            margin-bottom: 200px;
            outline-style:dashed;
            outline-color:purple;
            outline-width:5px;
        }
    </style>

</head>
<body>
    <h2>Border Properties</h2>
  
    <ul>
        <li>border</li>
        <li>width</li>
            <ul>
                <li>border-width</li>
                <li>border-top-width</li>
                <li>border-left-width</li>
                <li>border-right-width</li>
                <li>border-bottom-width</li>
            </ul>
        <li>style</li>
            <ul>
                <li>border-style</li>
                <li>border-top-style</li>
                <li>border-left-style</li>
                <li>border-right-style</li>
                <li>border-bottom-style</li>
            </ul>
        <li>color</li>
            <ul>
                <li>border-color</li>
                <li>border-top-color</li>
                <li>border-left-color</li>
                <li>border-right-color</li>
                <li>border-bottom-color</li>
            </ul> 
    </ul>

    <div class="box"> </div>
    <div class="box2"> </div>
</body>
</html>

These border properties allow you to customize the appearance of element borders. You can set different styles, widths, colors, and rounded corners to create visually appealing borders that match your design requirements. By using the shorthand property border, you can set all border properties in a single declaration.