Borders

Borders draw a line around your element. They can be subtle, bold, dashed, dotted, rounded — whatever your design needs.

Border Shorthand

The most common way to write a border is with the shorthand, combining width, style, and color:

.box { border: 2px solid black; }
.highlight { border: 3px dashed red; }
.card { border: 1px solid #ccc; }

The order does not matter — border: solid 2px black works the same way.

Individual Properties

You can also set each piece separately:

.box {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

Or target individual sides:

.box {
  border-top: 2px solid black;
  border-right: 1px dashed blue;
  border-bottom: 3px dotted green;
  border-left: none;
}

Border Styles

There are several built-in styles to choose from:

• solid — a single solid line
• dashed — broken line
• dotted — a line of dots
• double — two solid lines
• groove / ridge — 3D effects
• inset / outset — more 3D effects
• none — no border (the default)

In practice, solid, dashed, and dotted are the ones you will use 99% of the time.

border-radius

Rounded corners make boxes feel friendlier. The border-radius property rounds the corners of any element:

.rounded { border-radius: 10px; }
.circle { border-radius: 50%; }
.pill { border-radius: 999px; }

A value of 50% turns a square into a circle. A very large value (like 999px) creates a pill shape — great for buttons and badges.