Box Model

Borders and Radius

.card {
  border: 1px solid #ddd;      /* width, style, colour */
  border-radius: 12px;         /* rounded corners */
}

.avatar { border-radius: 50%; } /* a perfect circle */
.pill { border-radius: 999px; } /* fully rounded ends */
.alert { border-left: 4px solid orange; }

Border style	Looks like
`solid`	A plain line
`dashed`	Dashes
`dotted`	Dots
`double`	Two lines
`none`	No border

Outline

outline looks like a border but takes up no space, so it never moves the layout. Browsers use it for keyboard focus.