Codectionary / Developer documentation / CSS

Border Properties

border draws a line around an element's edge, controlled by width, style, and color, which can be set together via the border shorthand or individually per side (border-top, border-right, etc). border-radius rounds the corners, accepting one value for all corners or up to four for individual control.

Syntax

border: width style color;
border-radius: length;

Examples

The border Shorthand

Setting width, style, and color in one declaration.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-border{width:8rem;min-height:5rem;padding:1rem;background:#fff7ed;color:#431407}.circle{width:7rem;height:7rem}

.box { border: 2px solid #333; }
.dashed { border: 1px dashed #999; }
.top-only { border-top: 3px solid blue; } /* individual sides */
  1. The samples have their own dimensions, so edge styles and corner shapes are visible.
  2. A border shorthand sets width, style and colour together; a radius changes corner curves.
  3. Compare the labelled variants and edit one value rather than applying every rule to one generic card.
HTML used by this example
<div class="preview-row"><div class="box preview-border">box</div><div class="dashed preview-border">dashed</div><div class="top-only preview-border">top-only</div></div>

border-radius Variations

Rounding corners uniformly or individually.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-border{width:8rem;min-height:5rem;padding:1rem;background:#fff7ed;color:#431407}.circle{width:7rem;height:7rem}

.rounded { border-radius: 8px; }               /* all four corners */
.pill { border-radius: 999px; }                 /* fully rounded ends */
.circle { border-radius: 50%; }                 /* on a square element, makes a circle */
.custom { border-radius: 8px 8px 0 0; }         /* top-left top-right bottom-right bottom-left */
  1. The samples have their own dimensions, so edge styles and corner shapes are visible.
  2. A border shorthand sets width, style and colour together; a radius changes corner curves.
  3. Compare the labelled variants and edit one value rather than applying every rule to one generic card.
HTML used by this example
<div class="preview-row"><div class="rounded preview-border">rounded</div><div class="pill preview-border">pill</div><div class="circle preview-border">circle</div><div class="custom preview-border">custom</div></div>

Parameters and values

  • border-width (length): Thickness of the border
  • border-style (solid | dashed | dotted | none): Line style of the border
  • border-color (color): Color of the border
  • border-radius (length | %): Rounds the corners of the border box

Best practices

  • Use border-radius: 50% on an element with equal width and height to create a perfect circle
  • Use a very large border-radius value (like 999px) as a common trick for reliably pill-shaped buttons regardless of their size
  • Remember border-style must be set (border defaults to none) or the border will not render even with width and color set
  • Use individual longhand properties (border-top, border-left) when only specific sides need a border, rather than setting border then overriding with border: none on other sides

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading