Free · Fast · Privacy-first

CSS Border Generator

Writing CSS border declarations from memory means guessing widths and flipping between your editor and browser repeatedly.

⚡

Live preview updates on every value change

🔒

Generates both shorthand and individual border properties

✨

Full control over width, style, and color per side

⚡

Shows browser default border values for reference

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Border Builder to your website

Drop the Border Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How CSS Border Shorthand and Individual Properties Work Together

The CSS border shorthand property sets border-width, border-style, and border-color in a single declaration. The syntax is border: width style color, for example border: 2px solid #333. The order matters: browsers parse the three values by type rather than position, so border: solid 2px #333 also works, but the conventional order is width, style, color to match the longhand property names. If you omit any value, the browser applies its default: medium for width, none for style, and currentColor for color. Because border-style defaults to none, a declaration like border: 2px #333 produces no visible border at all, which is a frequent source of confusion.

Individual properties give you more control when you need different values per side. border-width accepts one to four values following the same top, right, bottom, left shorthand pattern used by margin and padding. A single value applies to all four sides; two values set top/bottom and left/right; three values set top, left/right, and bottom; four values set each side independently. border-style and border-color follow the same pattern. When you combine shorthand with individual overrides, place the individual property after the shorthand in your CSS so it takes precedence: border: 1px solid #ccc followed by border-bottom: 2px solid #000 produces a heavier bottom border.

Browser defaults vary slightly and affect how reset stylesheets interact with borders. Most elements have border: none or no border rules at all by default, but form elements like input, select, and textarea often have browser-specific border styles that differ between Chrome, Firefox, and Safari. Chrome renders input borders at 1px inset in some contexts; Firefox applies a similar inset style. Normalizing these with border: 1px solid #ccc or including a CSS reset ensures consistent appearance. When debugging a missing border, check whether border-style is set: it is the most commonly forgotten value that prevents any border from appearing.

Box-sizing has an outsized influence on how border declarations actually behave in layout, and it deserves explicit thought before you commit to widths in a design system. With the default content-box model, a border adds to the declared width and height: a 200px button with border: 2px solid #333 occupies 204px horizontally and 204px vertically because the border is painted outside the content box. Adding or removing a border shifts the element's outer size, which can cause neighbors to reflow and produces visible jitter on hover or focus states that change border thickness. The standard fix is to set box-sizing: border-box globally so the border subtracts from the content area instead. A 200px border-box button stays 200px regardless of border width. Most modern resets apply this universally; if you inherit a codebase without it, expect to find ad-hoc width adjustments scattered through the styles to compensate.

MDN: border W3C CSS Backgrounds and Borders

How to use this tool

💡

Select a border style first, such as solid or dashed, then set the width in pixels and pick a color. The tool generates the border shorthand automatically. Switch to individual properties if you need different values per side.

How It Works

Step-by-step guide to css border generator:

1
Choose a border style
Select solid, dashed, dotted, double, or another style from the style picker. Border-style must be set for any border to appear, so start here before adjusting other values.
2
Set border width
Use the width slider or input to set the border thickness in pixels. Typical values range from 1px for subtle borders to 4px for prominent ones.
3
Pick a border color
Open the color picker and choose a border color. You can also type a hex value or use rgba() for semi-transparent borders.
4
Copy the generated CSS
Click Copy CSS to copy the border shorthand or individual property declarations. Paste into your stylesheet and verify in your browser.

Real-world examples

Common situations where this approach makes a real difference:

Adding a consistent border to all input fields

Form inputs have inconsistent native borders across browsers. Setting border: 1px solid #d1d5db normalizes them to a clean, consistent appearance. You can then override on focus with border-color: #6366f1 to provide a visual indicator. Using the shorthand ensures all three sub-properties are set explicitly, preventing browser defaults from leaking through in any context.

Creating a bordered card component

Card components often use a light border combined with border-radius and a subtle box-shadow. A border of 1px solid #e5e7eb paired with border-radius: 8px gives a contained appearance. The border-generator helps you preview the exact color and width before committing, and you can adjust the color to match your design token palette without switching back to the browser repeatedly.

Debugging a border that is not appearing

A missing border is almost always caused by border-style defaulting to none. The tool shows all three required values together, making it easy to spot if you forgot to set a style. You can also confirm that border-width is greater than 0 and border-color is not transparent, which are the two other common causes of invisible borders.

Building a table with selective borders

HTML tables often need borders only on certain sides: a bottom border on th cells for header separation, no left or right borders. Using individual properties like border-bottom: 1px solid #e5e7eb on th and td, combined with border-collapse: collapse on the table element, produces clean table styling. The generator lets you preview each side independently before writing the final CSS.

Pro tips

Get better results with these expert suggestions:

Use currentColor to inherit text color automatically

Setting border-color: currentColor makes the border match the element's text color without hardcoding a value. This means the border updates automatically if you change the color property, which is useful for themed components and dark mode implementations where text and border colors should stay coordinated.

Combine border with box-sizing: border-box

By default, border adds to an element's width and height (content-box model). Switching to box-sizing: border-box makes the border subtract from the content area instead, so a 200px element with a 2px border stays 200px wide. This prevents layout shifts when adding or removing borders.

Transparent borders reserve space without showing

Setting border: 2px solid transparent allocates border space in the layout without visible lines. This is useful for hover states: you can change transparent to a color on hover without the element shifting size, because the border space was already reserved in the initial state.

Shorthand resets properties you do not specify

Writing border: none resets all four sides and all three sub-properties to their defaults, which is more thorough than border-style: none alone. Use the shorthand when you want to completely remove a border, and use individual properties when you only want to modify one aspect of an existing border.

Always set border-style explicitly

Border-style defaults to none, which means no border appears even if you set width and color. Always include border-style: solid (or another value) or use the shorthand to avoid invisible borders that are hard to debug.

Use border shorthand then override individual sides

Set a base border with the shorthand, then override specific sides with border-top or border-left below it in your CSS. This keeps declarations concise while still allowing per-side customization without repeating all three values.

Check form inputs separately

Input, textarea, and select elements have browser-native border styles that differ across browsers. Target them explicitly in your CSS and test in Chrome, Firefox, and Safari to catch inconsistencies before production.

FAQ

Frequently asked questions

The border shorthand accepts width, style, and color in any order because browsers identify each value by its type. However, the conventional and most readable order is width first, then style, then color: border: 2px solid #333. Width is identified as a length value, style as a keyword like solid or dashed, and color as any valid CSS color. Omitting any part causes the browser to apply the default for that sub-property, and since the default style is none, a border with no explicit style will not be visible regardless of width or color settings.

By default, CSS uses the content-box box model, where border width is added outside the declared width and height. A 200px wide element with a 2px border becomes 204px wide total. To prevent this, add box-sizing: border-box to the element. This makes the browser subtract the border from the content area instead, keeping the total element size at 200px. Many CSS resets and frameworks apply box-sizing: border-box globally using a universal selector to avoid this issue everywhere.

Use individual border-side properties: border-top, border-right, border-bottom, and border-left. Each accepts the same width, style, color values as the shorthand. You can also use the sub-property shorthands like border-width: 1px 2px 1px 2px following the top, right, bottom, left order. A common pattern is to set a base border using the shorthand and then override specific sides below it: border: 1px solid #ccc followed by border-top: none removes only the top border.

Border: none sets border-style to none while leaving width and color at their current values. Border: 0 sets border-width to 0 while leaving style and color unchanged. Visually both produce no visible border. The practical difference matters when overriding: border: none is more explicit about intent and is generally preferred for removing borders on buttons and inputs. Border: 0 is also valid and widely used, but border: none communicates more clearly that you intend to remove the border entirely.

Set border-color: currentColor or include currentColor in the shorthand: border: 1px solid currentColor. The currentColor keyword refers to the element's computed color property value. If the element has color: #6366f1, the border also uses #6366f1. This is useful for icon buttons, themed components, and dark mode implementations where text and border colors should always match. It also reduces the number of CSS custom properties you need to update when changing a component's color scheme.

Yes. Add transition: border-color 0.2s ease to the element, then change border-color on the :hover selector. For example: .btn { border: 2px solid #d1d5db; transition: border-color 0.2s ease; } .btn:hover { border-color: #6366f1; }. This animates only the color, not the width or style, which prevents layout shifts. Avoid animating border-width in transitions because it changes the element's size and triggers layout recalculations on every frame, which is expensive for performance.

Browsers apply different default styles to form elements. Input fields, buttons, and select menus receive browser-specific border styling that varies between engines. Safari uses a rounded inset appearance for buttons and inputs by default. Chrome renders form elements with a simpler flat border. To normalize across browsers, explicitly set border on these elements in your CSS and add -webkit-appearance: none or appearance: none to remove native styling before applying your own. CSS resets like Normalize.css handle this systematically. Beyond form elements, Safari and Chrome can also render sub-pixel border widths differently: a 0.5px border looks sharp on a high-DPI MacBook display in Safari but may render as 0 or 1px depending on the device pixel ratio and zoom level in Chrome. If pixel-perfect rendering matters, declare integer widths or use box-shadow with inset to draw a 1-pixel inner line that rasterizes identically across engines. For dotted and dashed styles, the spacing and dot diameter are implementation-defined per the CSS specification, which is why these styles look slightly different in every browser. Switch to a border-image with an inline SVG pattern when you need byte-identical dotted or dashed appearance across all platforms, since SVG rendering is far more consistent than the native border-style algorithms.

CSS supports nine border-style keywords: none (no border), hidden (same as none but affects border-collapse in tables), solid (a single continuous line), dashed (a series of dashes), dotted (a series of dots), double (two parallel lines with space between), groove (a 3D grooved appearance), ridge (the inverse of groove), inset (makes the border appear embedded), and outset (makes it appear raised). The groove, ridge, inset, and outset values depend on border-color to determine their shading, and their appearance varies slightly between browsers.

Outline is meaningfully cheaper than border for toggle-heavy interactions because outline does not affect layout. Changing border-width forces a layout recalculation: the browser must reflow surrounding elements to account for the new size, which cascades into paint and composite work. Changing outline only requires a paint, because outline is drawn outside the box without participating in layout. For focus rings, selection indicators, and hover states that appear and disappear many times per second during keyboard navigation or animated UIs, outline is the right tool. Reserve border for cases where the visual line must affect layout (such as collapsing table cells) or where it pairs with box-sizing: border-box to give precise total dimensions. The performance gap widens on large lists where many elements toggle state simultaneously.

Border and box-shadow paint as separate layers and combine cleanly, but the stacking order matters for the final appearance. The border paints inside the element's box outline; box-shadow paints outside it (or inside, with the inset keyword). A standard pattern is to use a thin border for a defined edge and a soft box-shadow for depth: border: 1px solid #e5e7eb combined with box-shadow: 0 1px 3px rgba(0,0,0,0.08) gives a card the crisp edge plus subtle elevation that defines most modern card designs. For elements that need to grow heavier on hover, animating box-shadow rather than border-width avoids layout shifts while still producing a more pronounced appearance. Border-radius applies to both layers, so a rounded card shows a rounded shadow without extra work.