CSS Border Property - Lena Design

The CSS border properties define the width, line style, and colour of the border of a box.

Syntax:

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

where:

border-width – specifies the width of the border.

border-style – specifies the style of the border.

border-color – specifies the colour of the border.

Example:

.square {
  border: 5px solid blue;
  height: 200px;
  width: 200px;
}

Output:

The border-style property specifies what kind of border to display:

dotted – defines a dotted border:

p.dotted {border-style: dotted;}

dashed – defines a dashed border:

p.dashed {border-style: dashed;}

solid – defines a solid border:

p.solid {border-style: solid;}

groove – defines a 3D grooved border. The effect depends on the border-color value:

p.groove {border-style: groove;}

ridge – defines a 3D ridged border. The effect depends on the border-color value:

p.ridge {border-style: ridge;}

inset – a 3D inset border. The effect depends on the border-color value:

p.inset {border-style: inset;}

outset – defines a 3D outset border. The effect depends on the border-color value:

p.outset {border-style: outset;}

rounded – the border-radius property is used to add rounded borders to an element:

p.round {border: 2px solid blue;border-radius: 12px;}

mixed – you can specify a different border for each side.

p.mix {border-style: dotted dashed solid double;}

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

p.color {border-style: solid;border-color: #ff0000;}

Enjoy coding!