Open menu

CSS Border Generator

Style borders visually, from simple hairlines and dashed upload zones to gradient borders that follow rounded corners and animated rotating borders. Set each side's width and color separately, add an outline with an offset, and check that the border has the 3:1 contrast a form field or button needs. Start from 27 presets and copy CSS, SCSS or Tailwind.

Preset gallery
Border

Accessibility checks

  • Pass The border has at least 6:1 contrast with the background and the inside. That meets the 3:1 minimum for UI components (WCAG 1.4.11).

Export code

.bordered {
  border-width: 2px;
  border-style: solid;
  border-color: #4F46E5;
  background-color: #FFFFFF;
  border-radius: 12px;
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Border
Type
Colors
Border color
Inside color
Background
Outline

How to use the border generator

  1. Choose a type: solid (with eight line styles), gradient, or animated.
  2. Set the width. Turn off Same width on all sides for accent bars like a thick left border or an underline.
  3. Pick colors. Solid borders can use a different color per side; gradient borders take three colors and an angle.
  4. Round the corners and set the inside and background colors to match your page.
  5. Add an outline for a double-frame look or a focus style.
  6. Check contrast and copy CSS, SCSS or Tailwind.

Line styles at a glance

  • Solid, dashed and dotted are the everyday styles. Dashed borders are the convention for file drop zones.
  • Double draws two lines and needs at least 3px of width to show both.
  • Groove, ridge, inset and outset shade the border to look carved or raised. They look dated in most modern designs, but suit retro interfaces.

Gradient border tips

Keep the border 2–4px wide so the gradient reads as a line rather than a frame. The inside color must be solid for the two-layer technique. For a transparent inside, use a mask-based approach instead. Animated borders are eye-catching: use one per page, for the element you really want people to notice.

Worked examples

Example 1: an accessible text input

Load Input: a 1px slate border (#64748B) on white with a 6px radius. The contrast check confirms more than 3:1 against both the white inside and the page, which WCAG 1.4.11 asks for when the border is what shows the field’s edge. Pair it with the Focus outline preset for the focused state, so keyboard users see a clear 3px blue ring offset by 2px.

Example 2: a file upload zone

Load Dashed upload. A 2px dashed indigo border on a pale indigo background is the familiar convention for “drop files here”. Increase the radius to 24px for a friendlier feel, and keep the dashed style: people recognise it instantly.

Load Gradient sunset and set the inside color to your card background. The 4px gradient border follows the 20px corners exactly. For the most popular plan, switch to Animated and set a slow 6-second turn, so the border draws attention without being distracting.

Common mistakes

  • Using border-image for rounded gradient borders: it ignores the radius, so use the two-background technique this tool exports.
  • Removing focus outlines: replace them with a clearer style instead.
  • Thin 3D styles: groove and ridge need at least 2px to show their shading.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads the border shorthand, border-width, border-style, border-color and border-radius. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

How do gradient borders work with rounded corners?

border-image ignores border-radius, so the generator uses two background layers instead: the inside color clipped to the padding box, and the gradient clipped to the border box, with a transparent border on top. The gradient shows only in the border area and follows the corners.

How is the animated border made?

It registers a custom property with @property so the browser can animate an angle, then spins a conic gradient by animating that angle. The rotation stops for people who prefer reduced motion.

What's the difference between border and outline?

A border takes up space in the layout and follows the border radius. An outline is drawn outside the element without affecting layout, and outline-offset moves it away from the edge. That makes outlines ideal for focus rings.

How much contrast does a border need?

Decorative borders have no requirement. When a border is what shows the edge of an input, checkbox or button, WCAG 1.4.11 asks for at least 3:1 against the colors next to it. The check compares the border with both the background and the inside color.

Can I put a border on only one side?

Yes. Use border-top, border-right, border-bottom or border-left on their own, or set a width of 0 for the sides you don't want.

Sources