Day One of Week Fifth

Border in CSS

Example
For Apply Border Snytax
S No.Element Name ValueSyntax
1Border-style Border style like dashed solid etc. border-style:solid
2Border-colorBorder Colorborder-color:red
3Border-width Border Thicknessborder-width:2px
Example

Normal Border

Set Border color

Set Border thinkness

Set border color and border thinkness

<h3 style='border-style:solid'>Normal Border </h3>
<h3 style='border-style:solid; border-color:red'>Set Border color</h3>
<h3 style='border-style:solid;border-width:15px'>Set Border thinkness</h3>
<h3 style='border-style:solid; border-color:red;border-width:15px'>Set border color and border thinkness</h3>

Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:

Style NameDescription
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

Example

Dotted Border

Dashed Border

Solid Border

Double Line Border

Groove Border

Ridge Border

Inset Border

Outset Border

None Border

<h3 style='border-style:dotted; border-color:red'>Dotted Border</h3>
<h3 style='border-style:dashed; border-color:red'>Dashed Border</h3>
<h3 style='border-style:solid; border-color:red'>Solid Border</h3>
<h3 style='border-style:double; border-color:red'>Double Line Border</h3>
<h3 style='border-style:groove; border-color:red'>Groove Border</h3>
<h3 style='border-style:ridge; border-color:red'>Ridge Border</h3>
<h3 style='border-style:inset; border-color:red'>Inset Border</h3>
<h3 style='border-style:outset; border-color:red'>Outset Border</h3>
<h3 style='border-style:none; border-color:red'>None Border</h3>

Shorthand Method for Apply Border

Example

For Apply Shorthand Method Border

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

Example :- :border:5px solid red;

Example

Dotted Border

Dotted Border

<h3 style='border:2px solid red'>Dotted Border</h3>
<h3 style='border:3px dashed red'>Dotted Border</h3>