Affiliate link

CSS - Borders

CSS border properties are used to define border style for HTML elements.

CSS Border - Border styles

Define css border properties, line style, line width, color, and radius.

border
border-width for border line width.
border-style for border line style.
border-color for border line color.

CSS border - Shorthand one line

The border property is a shorthand property that allows you to define Border width, style, and color in one line.

border: 1px solid red;

<html>
    <head>
        <style>
            .red-border {
                width: 300px;
                height: 100px;
                border: 1px solid red;
            }
            .blue-border {
                width: 300px;
                height: 100px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="red-border">Red CSS Border</div>
        <br/>
        <div class="blue-border">Blue CSS Border</div>
    </body>
</html>

Code Result

Affiliate link

CSS border-style

The border property is a shorthand property that allows you to define Border width, style, and color in one line.

border: 1px solid red;

<html>
    <head>
        <style>
            .red-border {
                width: 300px;
                height: 100px;
                border-style: solid;
                border-width: 1px;
                border-color: red;
            }
        </style>
    </head>
    <body>
        <div class="red-border">Red CSS Border</div>
    </body>
</html>

Code Result

Previous
« Background

Next
Colors »

Affiliate link

Advertisment