CSS Borders

⭐ CSS Borders 

CSS borders are used to give outlines around elements like <div>, <p>, <button>, etc.

A border has 3 main parts:

• border-width

• border-style

• border-color

---

1️⃣ Basic Border

div { border: 2px solid black; }

1 2 3

div { border: 2px solid black; }

 

---

2️⃣ Border Styles

Common styles:

• solid

• dashed

• dotted

• double

• groove

• ridge

• inset

• outset

• none

Example:

p { border: 3px dashed red; }

1 2 3

p { border: 3px dashed red; }

 

---

3️⃣ Border Width

div { border-width: 5px; }

1 2 3

div { border-width: 5px; }

 

Can be: thin, medium, thick, or pixel values.

---

4️⃣ Border Color

h1 { border-color: blue; }

1 2 3

h1 { border-color: blue; }

 

---

5️⃣ Border Sides (Individual)

p { border-top: 2px solid blue; border-right: 3px dotted red; border-bottom: 2px solid blue; border-left: 3px dotted red; }

1 2 3 4 5 6

p { border-top: 2px solid blue; border-right: 3px dotted red; border-bottom: 2px solid blue; border-left: 3px dotted red; }

 

---

6️⃣ Border Radius (Rounded Corners)

div { border: 2px solid black; border-radius: 10px; }

1 2 3 4

div { border: 2px solid black; border-radius: 10px; }

 

For circle:

img { border-radius: 50%; }

1 2 3

img { border-radius: 50%; }

 

---

7️⃣ Border Shorthand

div { border: 4px dotted green; }

1 2 3

div { border: 4px dotted green; }

 

(order = width style color)

---

📌 Example

.box { border: 3px solid purple; border-radius: 8px; }

1 2 3 4

.box { border: 3px solid purple; border-radius: 8px; }

 

• Next story CSS Margins
• Previous story CSS Backgrounds

You may also like...

• 

  CSS Lists

  December 15, 2025

   by CodeCapsule · Published December 15, 2025

• 

  CSS Icons

  December 15, 2025

   by CodeCapsule · Published December 15, 2025

• 

  CSS Website Layout

  November 26, 2025

   by CodeCapsule · Published November 26, 2025 · Last modified January 13, 2026