Border and Border-radius

The border property draws a visible line around an element, and border-radius rounds its corners.

.card {
  border: 2px solid #cccccc;
  border-radius: 8px;
}

border is shorthand for three separate properties: border-width, border-style, and border-color. The style value is required — without a border-style like solid, dashed, or dotted, no border renders at all, even with a width and color set.

.box {
  border-style: solid;   /* solid, dashed, dotted, double, none */
  border-width: 2px;
  border-color: #333;
}

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

border-radius rounds corners, and accepts up to four values for individual corners:

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* makes a perfect circle on a square element */
}

.speech-bubble {
  border-radius: 12px 12px 12px 0; /* top-left top-right bottom-right bottom-left */
}

Setting border-radius: 50% on an element with equal width and height produces a perfect circle — a common pattern for profile pictures and avatar icons. Values can also be different for each corner to create asymmetric shapes like speech bubbles or custom card designs.