Advanced CSS Border Tutorial

Learn Borders with Live Preview & Code

1️⃣ Border Width

Border Width = 8px
.box{
 border-width:8px;
 border-style:solid;
}

2️⃣ Border Styles

solid
dashed
dotted
double
groove
ridge
inset
outset
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

3️⃣ Border Colors

Red
Blue
Green
Orange
border:6px solid red;

4️⃣ Border Individual Sides

Different border on each side
border-top:6px solid red;
border-right:6px dashed blue;
border-bottom:6px dotted green;
border-left:6px double orange;

5️⃣ Border Radius (Shapes)

Rounded Box
Pill Shape
Circle
border-radius:10px;
border-radius:50px;
border-radius:50%;

6️⃣ Border Shorthand

border: 7px dashed purple;
border:7px dashed purple;

7️⃣ Hover Border Effect (Real Website Use)

Hover your mouse here
.box{
 border:4px solid black;
 transition:.3s;
}
.box:hover{
 border-color:red;
 transform:scale(1.05);
}