Borders & Rounded Corners
Learn how to control borders, border colors, border widths, and rounded corners in Tailwind CSS with border-* and rounded-* utilities.
Introduction
Borders and rounded corners are small details that have a big impact on how polished a component feels. Tailwind provides a complete set of utilities for border width, color, style, and corner radius, letting you fine-tune every edge without custom CSS.
- How to add a basic border.
- How to control border width and which sides get a border.
- How to set border color and style.
- How to round corners, including individual corners.
Adding a Border
The border class alone adds a 1px solid border in the default border color (a light gray) on all four sides of an element. This is the quickest way to add a simple outline to any box.
<div class="border p-4 rounded-lg"> A simple bordered box.</div>Click Run to see what this code prints.
Border Width
Use border-0, border-2, border-4, or border-8 to control the thickness of the border. border-0 removes it entirely, which is useful for overriding a border inherited from another class.
<div class="border-4 border-blue-500 p-4 rounded-lg"> A box with a thick blue border.</div>Click Run to see what this code prints.
Border Sides
You do not always need a border on every side. border-t, border-r, border-b, and border-l add a border to just the top, right, bottom, or left edge respectively, and each accepts its own width, like border-b-2.
<div class="border-b-2 border-slate-300 pb-2"> Section heading with a bottom divider</div>Click Run to see what this code prints.
Border Color and Style
Border color follows Tailwind's standard color palette, so border-red-500, border-emerald-600, and similar classes work exactly like background and text colors. Border style utilities like border-dashed and border-dotted change the line style from the default solid.
<div class="border-2 border-dashed border-amber-500 p-4 rounded-lg text-amber-700"> Drag and drop files here</div>Click Run to see what this code prints.
Rounded Corners
The rounded-* scale controls corner radius on all four corners at once, ranging from rounded-sm (subtle) through rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, up to rounded-full, which creates a pill or perfect circle on square elements.
<div class="flex gap-4"> <div class="rounded-sm bg-slate-700 text-white p-4">sm</div> <div class="rounded-lg bg-slate-700 text-white p-4">lg</div> <div class="rounded-full bg-slate-700 text-white w-16 h-16 flex items-center justify-center">full</div></div>Click Run to see what this code prints.
Rounding Individual Corners
You can round just one corner or one side using utilities like rounded-t-lg (top-left and top-right), rounded-tl-lg (only top-left), or rounded-r-full (right side). This is especially useful for chat bubbles, tabs, and cards that connect to another element.
<div class="rounded-t-xl bg-indigo-500 text-white p-4"> Card header (only top corners rounded)</div><div class="bg-white border border-t-0 border-slate-200 p-4"> Card body</div>Click Run to see what this code prints.
Common Mistakes
- Adding border-blue-500 without a border or border-* width class — color utilities do nothing if the border width is still 0.
- Using rounded-full on non-square elements, which produces an oval instead of a circle.
- Forgetting border-t-0 or similar when stacking two bordered boxes, resulting in a doubled-up border line between them.
- Overusing rounded-full on cards or buttons, which can look overly casual for professional layouts.
- Mixing up logical direction shorthands, like assuming border-l always means the visual left in right-to-left languages.
Best Practices
- Pick one or two corner radius values (like rounded-lg and rounded-xl) and reuse them consistently across your design system.
- Use rounded-full specifically for avatars, badges, and pill-shaped buttons.
- Use border-b or border-t as lightweight dividers instead of full four-sided borders.
- Combine border-dashed with muted colors for upload zones and empty states.
- Round only the outer corners of grouped elements (like a header attached to a card body) to avoid visual gaps.
Frequently Asked Questions
Tailwind's default border color is a light gray (based on your configured theme, typically gray-200), applied automatically whenever you use border without a border-{color} utility.
Use border-0, which sets border-width to 0 on all sides, effectively removing any visible border regardless of color or style utilities present.
Yes, Tailwind supports arbitrary values like rounded-[12px] for a precise radius that does not match the default scale.
Key Takeaways
- border adds a default 1px border; border-{n} controls its width.
- border-t, border-r, border-b, and border-l target individual sides.
- border-{color} and border-dashed/dotted control color and line style.
- rounded-* utilities control corner radius, from rounded-sm to rounded-full.
- Individual corners can be rounded with utilities like rounded-tl-lg.
Summary
Borders and rounded corners are simple utilities with an outsized effect on visual polish. With a consistent radius scale and a light touch with borders, your components will feel cohesive and professional. Next, you will learn how to add depth with shadows, opacity, and blur effects.