Nearby lessons

8 of 19

🟦 CSS Border Properties

📌 What are CSS Border Properties?

CSS Border Properties allow you to define the boundaries of HTML elements. You can control width, style, color, radius, and use shorthand to make your styling efficient and visually appealing.

📏 Border Width

The border-width property sets the thickness of the border. It can accept values like thin, medium, thick, or specific lengths in px, em, etc.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🎨 Border Style

The border-style property sets the type of border. Options include solid, dotted, dashed, double, groove, and ridge.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🌈 Border Color

The border-color property sets the color of the border. You can use named colors, HEX, RGB, or RGBA values.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🔵 Border Radius

The border-radius property allows you to round the corners of an element.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

✍️ Border Shorthand

The border shorthand lets you set width, style, and color all in one declaration.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🧠 Test Your Knowledge

5 Questions

Progress: 0 / 5
Keep Going!CSS - Margins