CSS border Property

CSS border property are used to style the borders of elements. They include border-width, border-style, and border-color, allowing control over border thickness, style, and color respectively.

Syntax:

border: border-width border-style border-color| initial | inherit;

border-width: This value specifies the weight or the width of the border.
border-style: This value specifies a style for the border, that is whether the border will be dotted, dashed, solid, etc.
border-color: This value specifies the color of the border.

CSS border-width Property

CSS border-width property sets the width of an element's border. It can be specified in pixels, em, rem, or other units to control the border's thickness.

Syntax:

border-width: length | thin | medium | thick | initial | inherit

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS border-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
        
        h2 {
            border-width: thin;
            border: solid red; 
        }
        h3{
            border-width: thick;
            border: solid red;   
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>

        <!-- Element whose border will be styled -->
        <h2 >
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h2>
        <h3 >
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
    </center>
</body>

</html>

The border-width property to set the width of borders for <h2> and <h3> elements.
Both <h2> and <h3> elements have their border width specified using the border-width property, with values of thin and thick, respectively.
The border-width property sets the width of the border for an element, which affects how thick or thin the border appears around the content.

CSS border-style Property

CSS border-style property defines the style of the border of an element. It sets the type of border such as solid, dashed, dotted, double, etc. It controls the appearance of the border based on the specified style.

Syntax:

border-style: value;

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Border-style Property</title>
    <style>
        h1 {
            color: green;
        }

        h3.none {
            border-style: none;
        }

        h3.dotted {
            border-style: dotted;
        }

        h3.dashed {
            border-style: dashed;
        }

        h3.solid {
            border-style: solid;
        }

        h3.double {
            border-style: double;
        }

        h3.groove {
            border-style: groove;
        }

        h3.ridge {
            border-style: ridge;
        }

        h3.inset {
            border-style: inset;
        }

        h3.outset {
            border-style: outset;
        }

        h3.hidden {
            border-style: hidden;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h3 class="none">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="dotted">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="dashed">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="solid">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="double">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="groove">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="ridge">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="inset">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="outset">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
        <h3 class="hidden">
            GeeksForGeeks.
            It is a computer science portal for geeks.
        </h3>
    </center>

</body>

</html>

Defines various <h3> elements with different classes representing different border styles.
CSS styles are applied to each <h3> class to set different border styles using the border-style property.
The available border styles include none, dotted, dashed, solid, double, groove, ridge, inset, outset, and hidden.
Each <h3> element displays the same content with varying border styles applied to demonstrate the visual difference between each style.

CSS border-color Property

CSS border-color property sets the color of an element's border. It specifies the color of all four borders, or individual borders if defined separately for top, right, bottom, and left.

Syntax:

border-color: color-value;

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS border-color Property</title>
    <style>
        h1 {
            color: green;
        }
        .myh1 {
            border-style: solid;
            border-color: red;
        }
        .myh2 {
            border: 4px solid red;
            border-color: red blue green black;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2 class="myh1">A solid red border</h2>
        <h2 class="myh2"> all sides with different colors </h2>
    </center>
</body>
</html>

In the example, class myh1 applies a solid red border to the element.
Class myh2 applies a border with different colors (red, blue, green, black) to each side.
Borders can be styled and colored using CSS to enhance the visual appearance of elements on a webpage.

CSS border-width Property

CSS border-style Property

CSS border-color Property

Explore