Free · Fast · Privacy-first

CSS Border on One Side Generator

Single-side borders are one of the most versatile design tools in CSS.

⚡

Set individual border-top, right, bottom, left independently

🔒

Preview left-side accent, bottom underline, and top separator patterns

✨

Adjust width and color per side without affecting others

⚡

Generates shorthand or individual property declarations

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.

One-Sided Borders: Navigation Accents, Blockquotes, Underlines, and Separators

The left-side accent pattern is one of the most common single-side border uses. Setting border-left: 4px solid #6366f1 on a navigation item, list entry, or sidebar element creates a colored indicator line that signals active or selected state. To prevent width changes between active and inactive states, set border-left: 4px solid transparent on inactive items so the layout space is pre-allocated. On the active item, change border-left-color to the accent color. This technique avoids horizontal layout shifts across the navigation when active state changes. The left accent width typically ranges from 3px to 5px for good visibility at standard navigation item heights.

Border-bottom as a heading underline gives more styling control than text-decoration: underline. You can set the thickness, color, and offset independently from the text. Setting display: inline-block or display: inline on a heading element and applying border-bottom: 2px solid #6366f1 creates an underline that matches the text width rather than the full block width. On block-level headings, border-bottom spans the full container width. For a partial underline that only underlies the heading text, wrap the text in a span with display: inline and apply the border-bottom to the span. Hover effects can animate the border-color or scale the underline width using width and transition.

Horizontal separators using border-top or border-bottom on section elements replace the html hr element with more styling flexibility. Setting border: none; border-top: 1px solid #e5e7eb on a div or section creates a precise separator that inherits the container width. This is cleaner than hr because you control the color, weight, and margin without needing to override the browser's default hr styling. For article layouts, a border-top on each section except the first creates clean visual separation between content blocks. Combining border-top with padding-top on paragraphs or sections creates consistent grouped content patterns across long-form layouts.

Box-sizing has a subtle but important effect on one-sided border patterns, especially in navigation grids where every list item should be the same width. Under the default content-box model, adding border-left: 4px solid colour to one item makes that item 4px wider than its neighbours, which pushes the whole row out of alignment. Switching to box-sizing: border-box subtracts the 4px from the content area instead, keeping the outer dimensions identical across items. Combined with the transparent-border pre-allocation trick (border-left: 4px solid transparent on inactive items, change only color on active), the layout stays perfectly stable as selection moves. The same logic applies to border-bottom indicators on tab bars: each tab keeps its measured width across all states because border-box absorbs the indicator into the existing width budget. Without border-box, every state change on a one-sided border subtly shifts neighbours, and the cumulative effect across a navigation grid is visible jitter on every click.

MDN: border-left MDN: border-bottom

How to use this tool

💡

Select the left side accent pattern to see border-left: 4px solid #6366f1 with border-right: none; border-top: none; border-bottom: none. Switch to underline mode for border-bottom only. Adjust width and color for your design, then copy the generated CSS.

How It Works

Step-by-step guide to css border on one side generator:

1
Select which sides to border
Enable only the sides you want in the side selector. Disable the other three sides to create a one-sided border. The preview updates to show exactly how the selected side configuration looks.
2
Set width and color for each active side
Enter a pixel width and select a color for each enabled side. Left accent borders typically use 3px to 5px. Bottom underlines use 1px to 3px. Top separators use 1px.
3
Preview the common patterns
Use the pattern presets to see left accent, bottom underline, and top separator patterns immediately. Adjust from a preset rather than starting from scratch for faster iteration.
4
Copy the generated CSS
Copy the individual border-side declarations. The tool generates the minimal set of properties needed without including zero-value sides unless they are needed for a reset.

Real-world examples

Common situations where this approach makes a real difference:

Active state indicator in sidebar navigation

A sidebar navigation uses border-left: 3px solid transparent on all items and border-left-color: #6366f1 on the active item. The transparent default pre-allocates the 3px space so the layout does not shift when the active item changes. Combined with background: #f0f4ff and color: #6366f1 on the active item, the left border reinforces the selection visually alongside the background highlight.

Blockquote left bar in an article

An article blockquote uses border: none with border-left: 4px solid #6366f1 and padding-left: 16px, plus font-style: italic and color: #4b5563. The left line provides the visual signal that this is quoted content without enclosing the text in a box. The padding-left keeps the text away from the colored line. This pattern is used by most editorial CSS frameworks for blockquote styling.

Tab bar active indicator

A horizontal tab bar uses border-bottom: 2px solid transparent on all tab buttons and border-bottom-color: #6366f1 on the active tab. Each tab has padding-bottom: 8px to add space between the tab label and the indicator line. The tab container has border-bottom: 1px solid #e5e7eb for the full-width separator, and the active tab indicator overlaps it visually. Transitions on border-color make the indicator movement smooth when switching tabs.

Heading with expanding underline on hover

A card heading uses ::after pseudo-element with content: ''; display: block; width: 0; height: 2px; background: #6366f1; transition: width 0.3s ease. On the heading :hover, the ::after width transitions to 100%, creating an expanding underline animation. This technique uses background instead of border-bottom for the underline to make the width transition work cleanly, as border-bottom width transitions create height changes rather than horizontal growth.

Pro tips

Get better results with these expert suggestions:

Left accent border on blockquotes is more readable than full borders

A blockquote with border: 1px solid #e5e7eb on all four sides competes with surrounding content. Setting border: none; border-left: 4px solid #6366f1 with padding-left: 16px creates a clean left accent that marks the quote without boxing it. The left line draws the eye and signals a quote without visual noise on the other three sides.

Animate bottom border width for underline-grow hover effects

Animating a heading underline from 0 to full width on hover creates an expanding underline effect. Set the element to position: relative, then use ::after with position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #6366f1; transition: width 0.3s ease. On :hover, set width: 100%. This approach uses a pseudo-element with background instead of border-bottom, which gives cleaner transition control.

Use border-bottom for tab navigation active indicators

Tab components use border-bottom to indicate the active tab. Set border-bottom: 2px solid transparent on all tabs and border-bottom-color: #6366f1 on the active tab. This produces a bottom indicator line that appears directly under the active tab text. Add padding-bottom to the tabs to create space between the text and the indicator. The border-bottom approach is standard in Material Design and most component library tab implementations.

Combine border-left with box-shadow for a raised accent effect

Adding box-shadow: inset 3px 0 0 0 #6366f1 to an element instead of border-left avoids the layout space that border-left occupies. The inset shadow paints a left-side line inside the element's box without adding to its width. This is useful inside flex or grid children where adding border-left would require adjusting padding to compensate for the occupied space.

Pre-allocate single-side border space with transparent values

On interactive elements where a border appears on a state change, set the border to transparent in the default state: border-left: 4px solid transparent. On the active state, change only border-color to the visible value. This prevents layout shifts when the border becomes visible.

Use border-bottom for custom underlines on inline text

Apply border-bottom on a span with display: inline rather than on a block element to get an underline that matches the text width. Combine with padding-bottom: 2px to add space between the text baseline and the underline. This gives far more visual control than text-decoration: underline.

Replace hr elements with border-top on divs for more control

The hr element has browser-default margin and styling that requires overriding. Using a div with border: none; border-top: 1px solid #e5e7eb gives you a separator without any defaults to fight. Control margin entirely with the parent padding or explicit margin on the separator div.

FAQ

Frequently asked questions

Use the individual border-side properties: border-top, border-right, border-bottom, or border-left. Each accepts the same width, style, and color values as the border shorthand. For example, border-bottom: 2px solid #6366f1 adds a 2px solid border only on the bottom. The other three sides have no border unless set explicitly. You can also use the shorthand to reset all sides first: border: none; border-left: 4px solid #6366f1 is a common pattern for adding a left accent without affecting other sides.

Set border-left: 4px solid transparent on all navigation items in their default state. This allocates 4px of space on the left without showing a line. On the active item, override with border-left-color: #6366f1. Because the space was pre-allocated, the visible border appears without shifting the layout. Add padding-left to the nav item text to ensure the left border does not crowd the content. Typical values are 3px to 5px border width with 12px to 16px padding-left.

Text-decoration: underline applies an underline through the browser's text rendering engine, which controls thickness, position, and color based on font and browser defaults. In modern CSS, text-decoration-color, text-decoration-thickness, and text-underline-offset give more control. Border-bottom applies a border to the element's box, which gives you full control over thickness and color but applies to the full element width unless you use display: inline or set an explicit width. Both approaches work; text-decoration properties are often more semantically appropriate for body text, while border-bottom is common for interactive heading underlines.

Set border: none; border-top: 1px solid #e5e7eb on a div element placed between sections. This creates a clean separator with no browser-default margin or styling to override. Control spacing with margin or with padding on the surrounding sections. The advantage over hr is that div has no default appearance and the border declaration is the only styling needed, while hr requires resetting margin, height, background, and border in most browser normalizers.

Yes. Add transition: border-color 0.2s ease or a more specific transition: border-left-color 0.2s ease to the element, then change the border-side color in a :hover, :active, or class selector. The color transition is smooth and efficient because it is a paint-only change with no layout impact. Avoid animating border-width because changes in width cause layout recalculations on every frame, which is expensive and causes visible jank at high animation speeds.

Three to 5 pixels is the most common range for left accent borders. At 2px, the line is visible but reads more as a subtle indicator than a prominent accent. At 4px, the line is clearly visible and assertive without overwhelming the content. At 6px and above, the accent becomes a significant visual element that may overshadow the content it is meant to accent. The exact value should be tested against the navigation item height and the amount of horizontal padding available to ensure the line and content text have enough breathing room.

Use a ::after pseudo-element: .heading::after { content: ''; display: block; width: 0; height: 2px; background: #6366f1; transition: width 0.3s ease; } .heading:hover::after { width: 100%; }. This transitions the width of the underline from 0 to full width on hover. Using a background rather than border-bottom for the animated underline is cleaner because width transitions on border-bottom affect the element's box geometry, while background-width changes are purely visual.

Apply border-bottom: 2px solid transparent to all tab buttons to pre-allocate the indicator space. On the active tab, override with border-bottom-color: #6366f1. The tab container typically has border-bottom: 1px solid #e5e7eb for the full-width track line. Setting the active tab indicator to 2px means it visually overrides the 1px track at the active position. Add padding-bottom: 8px to the tabs to create space between tab text and the indicator. Adding transition: border-color 0.15s ease makes switching tabs feel responsive.

Outline is meaningfully cheaper than border for state-change indicators because outline does not participate in layout. A border-left active state typically requires the transparent-border pre-allocation trick to avoid layout shifts when switching items, which works but means every navigation item carries 4px of reserved space even when inactive. Outline sidesteps the question entirely: drawing an outline only on the active item adds no space anywhere and produces a paint-only update on selection change. The visual result differs slightly because outline draws outside the element while border-left draws inside the left edge, so the active indicator sits in a slightly different position. For pure performance, outline wins; for the conventional sidebar look where the colour bar sits flush with the item edge, border-left with box-sizing: border-box and pre-allocation remains the standard pattern because the visual position matches user expectations.

Box-shadow with inset and a horizontal offset is a clean alternative to border-left for accent indicators and avoids the layout pre-allocation question entirely. Setting box-shadow: inset 3px 0 0 0 #6366f1 paints a 3px solid line on the inside of the left edge without occupying any layout space, so inactive items need no transparent border to reserve room. The shadow follows border-radius automatically, which makes it the better choice for rounded navigation items where border-left would render a square left edge regardless of corner radius. The tradeoff is that inset box-shadow paints over the element's background, so any content positioned at the extreme left edge of the item sits under the shadow line. Add padding-left equal to or greater than the shadow width to keep text and icons clear of the accent line. For most sidebar layouts this is a single property change with no layout consequences.