Web DesignApril 29, 20258 min

CSS Borders and border-radius: Creative Styling Techniques

Master the CSS border shorthand, per-side control, border-radius per corner, and techniques for creating custom shapes.

The Border Shorthand

/* Shorthand: width style color */
border: 2px solid #3b82f6;

/* Longhand equivalents */
border-width: 2px;
border-style: solid;
border-color: #3b82f6;

The style keyword is required — without it, the border is invisible even if width and color are set.

Border Style Values

solid — a single solid line (most common)
dashed — a dashed line; dash length is browser-defined
dotted — a dotted line; dot size equals border-width
double — two solid lines; total width equals border-width
groove / ridge — 3D inset/outset effects using border-color
inset / outset — 3D beveled appearance
none / hidden — no border (hidden takes priority in table collapsing)

Per-Side Control

/* Individual sides */
border-top: 3px solid red;
border-right: 1px dashed blue;
border-bottom: 2px dotted green;
border-left: none;

/* Per-side width shorthand (top right bottom left) */
border-width: 1px 2px 3px 0;
border-style: solid dashed dotted none;
border-color: red blue green transparent;

border-radius

border-radius rounds the corners of an element. It accepts one to four values following the same box model pattern as padding/margin:

/* All corners equal */
border-radius: 8px;

/* top-left/bottom-right  top-right/bottom-left */
border-radius: 16px 4px;

/* top-left  top-right/bottom-left  bottom-right */
border-radius: 16px 4px 8px;

/* top-left  top-right  bottom-right  bottom-left */
border-radius: 16px 4px 8px 2px;

/* Elliptical radius (horizontal / vertical) */
border-radius: 50% / 30%;

Per-Corner Longhand

border-top-left-radius: 16px;
border-top-right-radius: 4px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 4px;

Creative Shapes with border-radius

Perfect circle

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Pill / capsule

.pill {
  border-radius: 9999px; /* large enough to always be fully rounded */
}

Squircle (super-ellipse)

/* App icon style */
.squircle {
  border-radius: 22% 78% 26% 74% / 21% 29% 71% 79%;
}

Triangle using borders

/* Classic CSS triangle trick */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid #3b82f6;
}

outline vs border

outline looks similar to border but has key differences:

Outline does not take up space in the layout (no impact on box model)
Outline cannot be applied per-side
Outline ignores border-radius by default (though outline-offset can add spacing)
Outline is used for focus indicators — removing it breaks keyboard accessibility

Logical Properties

For internationalized designs (supporting RTL languages like Arabic or Hebrew), prefer logical border properties:

/* Physical */
border-left: 3px solid blue;

/* Logical — adapts to text direction */
border-inline-start: 3px solid blue;

Try it yourself

Generate CSS borders visually — control width, style, color, and radius per side.

Open Border Generator →