Borders in css

In CSS, the border property allows you to set the border around an HTML element. Borders can be customized in terms of width, style, and color. Here are the main properties related to borders in CSS, along with examples for each:

border

The border shorthand property sets all the border properties in one declaration.

Syntax:

border: <border-width> <border-style> <border-color>;

Example:

<style>
div {
    border: 2px solid black;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

 border-width

The border-width property sets the width of the border.

Syntax:

border-width: thin|medium|thick|length;

Example:

<style>
div {
     border-width: 5px;
     border-color:red;
     border-style: dashed;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

 border-style

The border-style property sets the style of the border.

Syntax:

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

Example:

<style>
div {
    border-style: dashed;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

 border-color

The border-color property sets the color of the border.

Syntax:

border-color: color;

Example:

<style>
div {
      border-width: 2px;
     border-color:red;
     border-style: dashed;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

border-top

The border-top property sets all the top border properties in one declaration.

Syntax:

border-top: <border-width> <border-style> <border-color>;

Example:

<style>
div {
    border-top: 5px solid blue;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

 border-right

The border-right property sets all the right border properties in one declaration.

Syntax:

border-right: <border-width> <border-style> <border-color>;

Example:

<style>
div {
    border-right: 5px dotted green;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

border-bottom

The border-bottom property sets all the bottom border properties in one declaration.

Syntax:

border-bottom: <border-width> <border-style> <border-color>;

Example:

<style>
div {
    border-bottom: 2px dashed purple;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

border-left

The border-left property sets all the left border properties in one declaration.

Syntax:

border-left: <border-width> <border-style> <border-color>;

Example:

<style>
div {
    border-left: 4px double orange;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

border-radius

The border-radius property sets the rounded corners for the border.

Syntax:

border-radius: length|%;

Example:

<style>
div {
    border: 2px solid black;
    border-radius: 10px;
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

 border-image

The border-image property sets an image as the border of an element.

Syntax:

border-image: source slice width outset repeat;

Example:

<style>
div {
    border: 10px solid transparent;
    border-image: url(border.png) 30 stretch; 
}
</style>
<div>
    <p>This page has a light blue background and a dark red heading.</p>
</div>

border-collapse

The border-collapse property sets whether table borders are collapsed into a single border or separated as in standard HTML.

Syntax:

border-collapse: collapse|separate;

Example:

<style>
    table {
        border-collapse: collapse;
    }

    table, th, td {
        border: 1px solid black;
    }

    th, td {
        padding: 8px;
        text-align: left;
    }
</style>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
</table>

border-spacing

The border-spacing property sets the distance between the borders of adjacent cells.

Syntax:

border-spacing: length length;

Example:

<style>
    table {
        border-spacing: 10px;
        border: 1px solid black;
    }

    th, td {
        padding: 8px;
        text-align: left;
        border: 1px solid black;
    }
</style>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
</table>

Each of these properties can be used to create a variety of border effects, allowing for detailed and flexible border design in web development.