🎯 What is border?

The border property creates a visible line around an HTML element.

It is commonly used to separate content and improve UI design.

The border property is made up of three main components:

Defines how thick the border will be.

• thin → thin line
• medium → default medium line
• thick → thick line
• or specific values like 2px, 5px, etc.

Defines how the border looks visually.

• none → no border
• solid → solid line
• dashed → dashed line
• dotted → dotted line
• double → double line
• groove → 3D grooved effect
• ridge → 3D ridged effect
• inset → sunken effect
• outset → raised effect

Defines the color of the border.

• red
• #333
• rgb(0, 0, 0)

• initial → Resets the element to default border settings
• inherit → Takes the border value from the parent element

div {
  border: 2px solid red; /* 2px thick, solid, red border */
}
                

p {
  border: thick dashed blue; /* thick, dashed, blue border */
}
                

img {
  border: none; /* removes border */
}
                

The border property is used to define the thickness, style, and color of an HTML element’s border.

You can think of its structure like this:

border: thickness style color;

border: 3px dotted green;

This means: A 3-pixel thick, green, dotted border.