Borders & Rounded Corners

The border shorthand

A border has three parts: width, style and colour. The shorthand combines them: border: 2px solid #333;.

<style>
  .a { border: 3px solid #4338ca; padding: 10px; margin-bottom: 8px; }
  .b { border: 2px dashed #ef4444; padding: 10px; margin-bottom: 8px; }
  .c { border-bottom: 4px solid #06b6d4; padding: 10px; margin-bottom: 8px; }
</style>
<div class="a">solid border</div>
<div class="b">dashed border</div>
<div class="c">just a bottom border</div>

Each box reads the three border parts in the order width, style, colour:

• .a — 3px solid #4338ca is a solid 3px indigo line on all four sides.
• .b — 2px dashed #ef4444 swaps the style to dashed, giving a broken red outline.
• .c — border-bottom targets only the bottom side, drawing a single underline-style line. You can border any one side with border-top, border-left and so on.

Rounded corners

border-radius rounds the corners. A large value (or 50%) makes circles and pills.

<style>
  .card { border: 1px solid #e6e8f0; border-radius: 14px; padding: 16px; margin-bottom: 8px; }
  .pill { background: #4338ca; color:#fff; padding: 8px 18px; border-radius: 999px; display:inline-block; }
  .circle { width: 60px; height: 60px; background: #06b6d4; border-radius: 50%; }
</style>
<div class="card">A rounded card</div>
<span class="pill">A pill button</span>
<div class="circle"></div>

The size of border-radius decides how round things get:

• .card — 14px gives gently softened corners, the classic card look.
• .pill — 999px is a huge value, so the short ends round completely into a “pill” shape.
• .circle — 50% on an equal-sided square rounds every corner until it becomes a perfect circle.