CSS Tutorial

CSS Border

CSS border is a key property used to characterize and style the borders around HTML components. Borders assume a vital part in website composition, assisting with making separation, emphasis, and stylish allure. In CSS, you can utilize a few border-related properties to control the style, variety, size, and shape of these borders. In this article, we will investigate these CSS border properties and how to really utilize them.

Key Points on CSS Border:

The border property is a shorthand for setting all border properties in one declaration.
You can set different borders for each side of an element using border-top, border-right, border-bottom, and border-left.
Borders can be styled using solid, dashed, dotted, or other styles.
Use border-radius to create rounded corners on the border.
The border-width property allows you to control the thickness of the border.
Use border-color to set the color of the border.

Value	Description
none	It doesn't define any border.
dotted	It is used to define a dotted border.
dashed	It is used to define a dashed border.
solid	It is used to define a solid border.
double	It defines two borders with the same border-width value.
groove	It defines a 3d grooved border. Effect is generated according to the border-color value.
ridge	It defines a 3d ridged border. Effect is generated according to the border-color value.
inset	It defines a 3d inset border. Effect is generated according to the border-color value.
outset	It defines a 3d outset border. Effect is generated according to the border-color value.

Syntax for CSS Border Properties:

Syntax Example


        /* Border shorthand syntax */
        .border: width style color;
        
        /* Example */
        .border: 2px solid #000000;

Examples of CSS Border Properties:

The following examples demonstrate the usage of different border properties:

Code Example: Solid Border


            .div {
            border: 2px solid black;
            padding:20px;
                 }

Output

This div has a solid black border.

Code Example: Dotted Border


            .div {
            border: 3px dotted red;
            padding:20px;
                 }

Output

This div has a dotted red border.

Code Example: Border Radius


            .div {
            border: 4px solid blue;
            border-radius: 10px;
                 }

Output

This div has rounded corners.

Common Border Properties:

border-width: Sets the width (thickness) of the border.
border-style: Defines the style of the border (e.g., solid, dotted, dashed).
border-color: Sets the color of the border.
border-radius: Defines the radius of the corners to create rounded borders.
border-top, border-right, border-bottom, border-left: Set borders for individual sides of an element.

When using borders, be mindful of the visual balance between content and borders. Avoid using too thick or overwhelming borders that might distract from the content itself.