On this page

CSS Borders, Outlines & Rounded Corners

Badar KhalilUpdated September 29, 2026 5 min read

What Are CSS Borders and Outlines?

A CSS border is a line drawn around an element between its padding and margin. An outline is a similar line drawn outside the border that does not affect layout. Rounded corners come from border-radius. Our focus keyword is CSS borders, and this lesson also covers trending topics: CSS border-radius examples, pill buttons and circles, outline-offset, :focus-visible for accessible focus rings, border-image, gradient borders, logical border properties, and box-shadow rings.

1. The border Shorthand

border: 2px solid #334155; sets width, style and color in one line. Without a style, no border appears, because the default style is none.

border-width: thin, medium, thick or a length like 3px.
border-style: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden.
border-color: any CSS color. It defaults to currentColor.

2. Individual Sides and Logical Properties

Set a single side with border-top, border-right, border-bottom, border-left. Modern CSS prefers logical properties that adapt to writing direction: border-inline-start, border-inline-end, border-block-start, border-block-end. They make right-to-left layouts (Arabic, Urdu, Hebrew) work automatically.

3. Borders and the Box Model

With the default box-sizing: content-box, borders add to the element's width. Use box-sizing: border-box so that width includes padding and border. Most resets set *, *::before, *::after { box-sizing: border-box; }.

4. border-radius

border-radius rounds corners.

One value: all corners. border-radius: 12px;
Two to four values follow the order top-left, top-right, bottom-right, bottom-left.
Circle: a square element with border-radius: 50%.
Pill or capsule: border-radius: 9999px (a huge value works for any height).
Elliptical corners use a slash: border-radius: 50% / 20% (horizontal radius / vertical radius).
Individual longhands: border-top-left-radius, border-start-start-radius (logical).

Rounded corners also clip backgrounds, and with overflow: hidden they clip child content, such as images inside cards.

5. outline

An outline is drawn outside the border edge, does not take space in layout and does not change the element's size. Properties: outline-width, outline-style, outline-color, outline-offset and the shorthand outline.

outline-offset moves the outline away from the border (positive) or into it (negative).
Modern browsers make outlines follow border-radius.
Outlines are perfect for focus rings, debugging layout (* { outline: 1px solid red; }) and hover highlights that must not shift layout.

6. Border vs Outline vs Box-shadow

Feature	border	outline	box-shadow
Affects layout	Yes	No	No
Per-side control	Yes	No	Via offsets
Follows border-radius	Yes	Yes (modern)	Yes
Offset from box	No	Yes (outline-offset)	Yes (spread)
Forced-colors (high contrast) visible	Yes	Yes	No

7. Accessible Focus Styles

Never write outline: none without a replacement, because keyboard users depend on a visible focus indicator (WCAG 2.4.7 and 2.4.11). Use :focus-visible, which shows the ring for keyboard focus but usually not for mouse clicks.

Code

:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

8. border-image

border-image paints an image or gradient on the border: border-image: linear-gradient(45deg, #f43f5e, #6366f1) 1;. It ignores border-radius, so for rounded gradient borders use the two-layer background technique (see the gradients lesson).

9. Double Borders and Rings with box-shadow

Multiple rings: box-shadow: 0 0 0 3px white, 0 0 0 6px #2563eb;. Shadows do not affect layout, but they are not shown in forced-colors mode, so pair them with a transparent outline for accessibility: outline: 2px solid transparent;.

Best Practices

Use box-sizing: border-box globally.
Use rem or px radius tokens in your design system (for example 4px, 8px, 16px, 9999px).
Prefer outline for focus and hover states so layout does not jump.
Prefer logical border properties for international sites.
Match child radius to parent radius minus padding for nested rounded shapes.

Common Mistakes

Forgetting border-style, so the border is invisible.
Removing outlines and leaving no focus indicator.
Using borders for hover effects, causing layout shift.
Expecting border-image to round.
Using border-radius: 50% on a non-square element and getting an ellipse instead of a circle.

Summary

Borders shape the box, outlines draw attention without shifting layout, and border-radius creates everything from soft cards to circles and pills. Combine them with :focus-visible, logical properties and box-shadow rings for polished, accessible interfaces. Explore the examples below.

Try it Yourself HTML

<style>
  .b { display: inline-block; width: 120px; padding: 14px 8px; margin: 6px; text-align: center; font: 13px sans-serif; border-color: #2563eb; border-width: 4px; }
  .s { border-style: solid; } .d { border-style: dashed; } .dt { border-style: dotted; } .db { border-style: double; } .gr { border-style: groove; } .ri { border-style: ridge; }
</style>
<div class='b s'>solid</div><div class='b d'>dashed</div><div class='b dt'>dotted</div><div class='b db'>double</div><div class='b gr'>groove</div><div class='b ri'>ridge</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .x { display: inline-block; margin: 8px; background: #2563eb; color: #fff; font: 13px sans-serif; text-align: center; }
  .card { width: 120px; height: 80px; border-radius: 12px; line-height: 80px; }
  .circle { width: 90px; height: 90px; border-radius: 50%; line-height: 90px; }
  .pill { padding: 10px 24px; border-radius: 9999px; }
  .leaf { width: 120px; height: 80px; border-radius: 40px 0 40px 0; line-height: 80px; }
  .ellipse { width: 120px; height: 80px; border-radius: 50% / 30%; line-height: 80px; }
</style>
<div class='x card'>12px</div><div class='x circle'>50%</div><div class='x pill'>Pill button</div><div class='x leaf'>leaf</div><div class='x ellipse'>50% / 30%</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .btn { padding: 10px 20px; border: 2px solid #2563eb; background: #fff; color: #2563eb; border-radius: 8px; cursor: pointer; margin: 10px; }
  .btn:hover { outline: 3px solid #93c5fd; }
  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 4px; }
</style>
<p>Hover with the mouse, then press Tab to see the keyboard focus ring.</p>
<button class='btn'>Button 1</button><button class='btn'>Button 2</button>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; padding: 16px; }
  .ring { display: inline-block; padding: 14px 22px; margin: 14px; background: #fff; border-radius: 12px; }
  .r1 { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563eb; }
  .r2 { box-shadow: 0 0 0 3px #22c55e, 0 0 0 6px #ecfdf5, 0 0 0 9px #22c55e; }
  .gb { border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f43f5e, #6366f1) border-box; }
  .bi { border: 6px solid; border-image: linear-gradient(45deg, #f43f5e, #6366f1) 1; padding: 10px 18px; margin: 14px; display: inline-block; }
</style>
<div class='ring r1'>Double ring</div><div class='ring r2'>Triple ring</div><div class='ring gb'>Rounded gradient border</div><div class='bi'>border-image (no rounding)</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .note { max-width: 320px; padding: 12px 16px; margin: 10px 0; background: #f1f5f9; border-inline-start: 6px solid #2563eb; border-radius: 4px; }
  .warn { border-inline-start-color: #f59e0b; background: #fffbeb; }
  [dir='rtl'] .note { text-align: right; }
  .card { max-width: 280px; border: 1px solid #cbd5e1; border-radius: 16px; overflow: hidden; }
  .card .top { height: 80px; background: linear-gradient(135deg, #38bdf8, #6366f1); }
  .card p { margin: 0; padding: 12px; }
</style>
<div class='note'>Logical border on the start side</div>
<div class='note warn'>Warning note</div>
<div dir='rtl'><div class='note'>RTL: the border flips automatically</div></div>
<div class='card'><div class='top'></div><p>overflow: hidden clips children to the rounded corners.</p></div>

Output

Press Run to execute.

Exercise: Build a Pill Button With a Focus RingHTML

Style .pill so it has a 2px solid blue border, a fully rounded pill shape, and padding of 10px 24px. Add an accessible :focus-visible style using outline and outline-offset (do not remove the outline).

Try it Yourself HTML

<style>
  .pill { /* your code */ }
  .pill:focus-visible { /* your code */ }
</style>
<button class='pill'>Subscribe</button>

Output

Press Run to execute.

Show expected output

A pill-shaped button with a visible orange or blue focus ring when tabbed to.

This is a self-check — compare your result with the expected output above.

Exercise: Make an Avatar and a Callout BoxHTML

Turn the .avatar div into a 80px circle with a 4px white border and a soft blue box-shadow ring. Then style .callout with a 5px left border using a logical property (border-inline-start), a light background and 6px radius.

Try it Yourself HTML

<style>
  .avatar { background: #94a3b8; /* your code */ }
  .callout { padding: 12px 16px; /* your code */ }
</style>
<div class='avatar'></div>
<div class='callout'>Helpful tip goes here</div>

Output

Press Run to execute.

Show expected output

A circular avatar with a ring, and a callout with a colored start-side border.

This is a self-check — compare your result with the expected output above.

Quiz: Borders, Outlines and Rounded Corners Quiz Pass 70%

Loading quiz…

Was this page helpful?