BYTETOOLS

CSS Border Generator

Free CSS border generator with per-side width, style and color controls plus a border-image maker for gradients or images. Live preview and copy-ready CSS.

Bordered box

Border

4

Border image

CSS

border: 4px solid #6d28d9;

What is the CSS Border Generator?

The CSS Border Generator builds the border shorthand visually so you never have to remember the width, style and color order again.

  • Width, style and color controls for the border shorthand
  • Per-side control for top, right, bottom and left
  • Eight border styles: solid, dashed, dotted, double and more
  • Border-image maker using a gradient or image URL
  • border-image slice, width and repeat controls
  • Live preview and copy-ready CSS, fully client-side

How to use the CSS Border Generator

  1. 1

    Set the border width, style and color for all sides at once.

  2. 2

    Toggle per-side control to style the top, right, bottom and left edges independently.

  3. 3

    Optionally enable border-image and pick a gradient or image URL, then tune slice, width and repeat.

  4. 4

    Watch the live preview update, then copy the generated CSS into your project.

About the CSS Border Generator

The CSS Border Generator builds the border shorthand visually so you never have to remember the width, style and color order again. Set the width, pick a style like solid, dashed, dotted or double, choose a color, and a preview box shows the result instantly. Flip on per-side control to give the top, right, bottom and left edges their own settings.

It also doubles as a border-image generator. Turn on the border-image section to wrap your element in a linear gradient you configure with two colors and an angle, or point it at an image URL, then fine-tune border-image-slice, border-image-width and border-image-repeat until the frame looks right.

Everything is generated 100% locally in your browser — no uploads, no sign-up — and the copy-ready CSS drops straight into your stylesheet. It keeps working offline once the page has loaded.

Frequently asked questions

What is the correct order for the CSS border shorthand?

The border shorthand is written as width, style, then color — for example border: 2px solid #333. Only the style is strictly required, but including all three is clearest. This generator always outputs them in the right order for you.

How do I add a border to only one side in CSS?

Use the side-specific longhand such as border-bottom or border-left instead of border. Turn on per-side control in this tool and set a width of zero on the sides you want blank; it generates a separate border-top, border-right, border-bottom and border-left rule.

What is border-image and how does it work?

border-image replaces an element's border with an image or gradient. You provide a source, then border-image-slice cuts it into nine regions, border-image-width sets how thick the border area is, and border-image-repeat controls how the edges tile. This tool writes all four properties.

Why is my border-image not showing up?

border-image needs an existing border to paint into, so make sure a border-style and width are set. Also check that border-image-slice is greater than zero and, for URL sources, that the image actually loads. The generator keeps a base border in place so the image has somewhere to render.

Can I use a gradient as a CSS border?

Yes. Set border-image-source to a linear-gradient, as this tool does when you choose the gradient source, and pair it with a solid base border. It is the simplest way to get a multi-color gradient frame without extra wrapper elements.

What is the difference between a border and an outline?

A border is part of the box model and takes up layout space, and it supports per-side widths, colors and border-image. An outline is drawn outside the border and never affects layout, which makes it better suited to focus rings than to decorative frames.

Related tools