Border Preview
This is a live preview of your custom border styles.
Tip: Fine-tune per-side width and radius for custom shapes.
.border-box {
border-width: 3px 6px 3px 6px;
border-style: solid;
border-color: rgba(99, 102, 241, 1);
border-radius: 16px 16px 24px 24px;
}border-[3px_6px_3px_6px] border-solid border-[rgba(99,102,241,1)] rounded-[16px_16px_24px_24px]
Add the class to any element to apply these borders.
Choose a style
Select border style, color, and base width.
Adjust width & radius
Fine-tune per-side width and corner radius.
Preview live
See your border updates instantly in real-time.
Copy the code
Copy clean CSS or Tailwind classes for your project.
CSS border is a long-standing property used to outline elements with control over thickness, style, and color. Modern designs also rely heavily on per-corner radius for shapes like pills, tickets, and asymmetric tabs. This tool gives you a visual editor for everything in one place.
Disable the link toggle to set top, right, bottom, and left widths independently — great for hard underlines, side accents, or window-style frames. The CSS output switches to longhand border-width automatically when sides differ.
Disable Link all corners to round each corner separately. Mix large and small radii to make tickets, callout shapes, or speech bubbles. The output uses the four-value border-radius shorthand.
solid is the default. dashed and dotted are great for placeholder containers. double needs ≥3px to render its twin lines. groove, ridge, inset, and outset fake 3D depth — use thick widths.
Switch the output tab between CSS and Tailwind. CSS gives you a clean .border-box rule. Tailwind emits arbitrary width/color/radius classes you can paste directly onto an element.
border is a CSS property that paints a line around an element's box. You can control its width (thickness), style (solid, dashed, dotted, etc.), and color, plus customize each side and each corner radius independently.
Yes. Disable Link sides to set top/right/bottom/left widths individually. The CSS output uses the longhand border-width property when sides differ.
Disable Link all corners to set each corner independently. Useful for tickets, badges, asymmetric tabs, and skewed shapes.
These are 3D-style borders that use the color plus a slightly lighter or darker version to fake depth. Groove looks carved in, ridge bumps out, inset darkens the box, outset lightens it. They work best on thick borders (4px+).
double requires at least 3px of width — the browser splits the width into two lines plus a gap. If your width is below 3px, the browser falls back to solid.