Borders, radius and outlines in CSS

Edges: border styles, rounded corners, and outlines that do not shift layout.

.tag {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding-inline: 0.6rem;
}

.card {
  border-radius: 0.75rem 0.75rem 0 0;
  border-block-end: 3px solid #7c5cff;
}

.avatar {
  border-radius: 50%;
  outline: 2px solid #14161c;
  outline-offset: -2px;
}

How it works

1. Individual corners take two radii for an ellipse.
2. An outline is drawn outside the box and never moves anything.
3. border-radius with a percentage makes a circle from a square.

Keywords and builtins used here

• avatar
• border
• card
• outline
• px
• rem
• tag

The run, in numbers

Lines

16

Characters to type

253

Tokens

62

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 50 seconds.

Type this snippet

Step 3 of 6 in Boxes, step 16 of 26 in Selectors & the box model.

← Previous Next →