CSS Border

The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS Border

In CSS, borders are defined with the border property, which can be applied to any HTML element.

In CSS, the border property is used to create and style borders around HTML elements.

CSS border style

The border style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example:
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em etc)or by using one of the three pre-defined values: thin, medium, or thick:

Example:
p.one {
border-style: solid;
border-width: 3px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 3px;
}

p.four {
border-style: dotted;
border-width: thick;
}

Key points of CSS Border

1. Border Shorthand

The border shorthand property combines width, style, and color in one line:

Example: p { border:3px solid black; }

2. Individual Side Borders

You can style each side independently with border-top, border-right, border-bottom, and border-left.

Example: p { border-top: 2px solid red; border-bottom: 3px dashed blue; }

3. Border styles: CSS provides difference styles, including:

• Solid:A single solid line
• Dashed:A dashed line
• Dotted:A dotted line
• Double:Two solid lines
• Groove,Ridge,Outset:For 3D effects