CSS Borders

Add borders, outlines, and rounded corners to elements.

Border Shorthand

.card {
  border: 2px solid #333;  /* width | style | color */
}

/* Individual sides */
.box {
  border-top: 4px solid red;
  border-bottom: 1px dashed #ccc;
}

Border Styles

Value	Looks like
`solid`	Solid line
`dashed`	Dashed line
`dotted`	Dotted line
`double`	Two solid lines
`none`	No border

Border Radius

.card    { border-radius: 8px; }       /* all corners */
.pill    { border-radius: 999px; }     /* pill shape */
.circle  { border-radius: 50%; }       /* perfect circle */

/* Individual corners: top-left | top-right | bottom-right | bottom-left */
.custom  { border-radius: 16px 4px 16px 4px; }

Outline vs Border

outline is like border but does not affect layout (no space taken). Used for focus rings.

button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;  /* gap between element and outline */
}

Never do outline: none on focusable elements — it breaks keyboard accessibility. Replace it with a custom outline instead.

Border Shorthand

Border Styles

Border Radius

Outline vs Border

Test Yourself