border

Borders are elements that outline the edges of an HTML element. They can be used to create visual separation, define shapes, and enhance the overall presentation of a webpage.

Basic Syntax

To apply a border to an element, you use the border property. The basic syntax is:

border: border-width border-style border-color;

Breakdown:

• border-width: Specifies the thickness of the border.
• border-style: Defines the style of the border.
• border-color: Sets the color of the border.

Example

<div id="my-div">This is a div with a border.</div>

#my-div {
    border: 2px solid blue;
}

In this example, the div with the ID “my-div” will have a 2-pixel thick, solid blue border.

Common Border Styles

Here are some common border styles you can use:

• none: No border.
• solid: A solid border.
• dotted: A dotted border.
• dashed: A dashed border.
• double: A double border.
• groove: A 3D-effect border with a grooved appearance.
• ridge: A 3D-effect border with a ridged appearance.
• inset: A 3D-effect border that looks sunken.
• outset: A 3D-effect border that looks raised.

Separating Border Properties

You can also set each border property individually:

#my-div {
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

Setting Borders for Different Sides

To set borders for specific sides of an element, you can use:

• border-top
• border-right
• border-bottom
• border-left

For example:

#my-div {
    border-top: 2px solid red;
    border-right: 1px solid green;
    border-bottom: 3px solid blue;
    border-left: 2px solid yellow;
}

Additional Tips

• You can combine border properties to create more complex effects.
• Use border radius to create rounded corners.
• For more advanced border styling, consider using CSS gradients or background images.
• Only the color is optional. If you omit it, the color applied will be the color of the text.