html
/

CSS Borders

Last Sync: Today

On this page

13
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Borders

What are CSS Borders?

CSS borders are used to define the outline around elements. You can control their width, style, color, and shape.

Basic Border

CSSRead-only
1
div {
  border: 1px solid black;
}

Border Width

CSSRead-only
1
div {
  border-width: 2px;
}

Border Style

CSSRead-only
1
div {
  border-style: solid;
}

Border Color

CSSRead-only
1
div {
  border-color: red;
}

Border Styles List

StyleDescription
solidSingle line
dashedDashed line
dottedDotted line
doubleDouble line
noneNo border

Border Sides

CSSRead-only
1
div {
  border-top: 2px solid red;
  border-right: 2px solid green;
  border-bottom: 2px solid blue;
  border-left: 2px solid black;
}

Border Radius

CSSRead-only
1
div {
  border-radius: 10px;
}

Rounded Circle

CSSRead-only
1
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Border Shorthand

CSSRead-only
1
div {
  border: 2px dashed blue;
}

Best Practices

  • Use shorthand for cleaner code
  • Use border-radius for modern UI
  • Maintain consistent border styles
  • Use subtle borders for better UX

Common Mistakes

  • Missing border-style (border won’t show)
  • Using too many border styles
  • Inconsistent border widths
  • Overusing bright border colors

Conclusion

CSS borders help define structure and improve UI design. Proper usage enhances layout clarity and aesthetics.

Try it yourself

div {
  border: 2px solid red;
  border-radius: 8px;
}

Test Your Knowledge

Q1
of 3

Which property sets border style?

A
border-width
B
border-style
C
border-color
D
border-radius
Q2
of 3

Which creates rounded corners?

A
border-style
B
border-radius
C
border-width
D
border-color
Q3
of 3

Which shorthand defines all?

A
border-all
B
border
C
border-full
D
outline

Frequently Asked Questions

Why is my border not visible?

Because border-style is not defined.

What is border-radius?

It creates rounded corners.

Can I apply border to one side?

Yes, using border-top, border-right, etc.

Previous

css background

Next

css margin

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.