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);
}