 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/dialog: Dialog components/input: Input components/popover: Popover components/pre: Pre components/radio: Radio components/separator: Separator components/switch: Switch components/table: Table components/textarea: Textarea components/tooltip: Tooltip components/typography: Typography plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme plugins/theme-gruvbox: Gruvbox Theme plugins/theme-nord: Nord Theme start/ascii-boxes: ASCII Boxes start/changelog: Changelog start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells installation/nextjs: Next.js installation/vite: Vite start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins start/theming: ### Using Multiple Theme Accents start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import

Separator

A horizontal or vertical separator

1 <p>The quick brown fox obliterates</p>
2 <div is-="separator"></div>
3 <p>the lazy dog</p>
4
1 body {
2 display: flex;
3 flex-direction: column;
4 }

Import

@import "@webtui/css/components/separator.css";

Usage

<!-- Horizontal -->
<div is-="separator"></div>
<div is-="separator" direction-="horizontal"></div>
<div is-="separator" direction-="x"></div>

<!-- Vertical -->
<div is-="separator" direction-="vertical"></div>
<div is-="separator" direction-="y"></div>

If direction- is not specified, separators are horizontal by default.

Examples

Vertical

1 <p>The lazy brown<br/>dog licks</p>
2 <div is-="separator" direction-="vertical"></div>
3 <p>the yucky<br/>fox</p>
4
1 body {
2 display: flex;
3 flex-direction: row;
4 }

Caps

Use the cap- attribute to control how the ends of the separator behave

Bisecting Caps

cap-="bisect" extends the edges of the separator by 0.5ch making it ideal to use alongside the box- utility

1
2 <div class="column">
3 <div box-="square" class="column">
4 <p>Default</p>
5 <div is-="separator"></div>
6 <p>Separator</p>
7 </div>
8 <div box-="square" class="column">
9 <p>Bisecting</p>
10 <div is-="separator" cap-="bisect"></div>
11 <p>Separator</p>
12 </div>
13 </div>
14 <div class="column">
15 <div box-="square" class="row">
16 <p>Default</p>
17 <div is-="separator" direction-="y"></div>
18 <p>Separator</p>
19 </div>
20 <div box-="square" class="row">
21 <p>Bisecting</p>
22 <div is-="separator" direction-="y" cap-="bisect"></div>
23 <p>Separator</p>
24 </div>
25 </div>
26
1 body, .row {
2 display: flex;
3 flex-direction: row;
4 flex: 1;
5 }
6 .column {
7 display: flex;
8 flex-direction: column;
9 flex: 1;
10 }

Edge Caps

cap-="edge" clips off the edges of the separator by 0.5ch making it ideal for corners

1
2 <div class="column">
3 <span>bisect</span>
4 <div is-="separator" cap-="bisect" direction-="y"></div>
5 <div is-="separator" cap-="edge"></div>
6 <span>edge</span>
7 </div>
8 <div class="column">
9 <span>bisect</span>
10 <div is-="separator" cap-="bisect" direction-="y"></div>
11 <div is-="separator"></div>
12 <span>default</span>
13 </div>
14 <div class="column">
15 <span>bisect</span>
16 <div is-="separator" cap-="bisect" direction-="y"></div>
17 <div is-="separator" cap-="bisect"></div>
18 <span>bisect</span>
19 </div>
20
1 body {
2 display: flex;
3 flex-direction: column;
4 gap: 1lh;
5 }
6 .column {
7 display: flex;
8 flex-direction: column;
9 }
10 div[direction-="y"] {
11 height: 2lh;
12 }

Start and End Caps

You can specify two values for the cap- attribute to control the start and end of the separator

<div is-="separator" cap-="edge bisect"></div>
<div is-="separator" cap-="default edge"></div>
<div is-="separator" cap-="bisect default"></div>
1
2 <div box-="square" class="column">
3 <div class="column">
4 <span>edge bisect</span>
5 <div is-="separator" cap-="edge bisect"></div>
6 </div>
7 <div class="column">
8 <span>default edge</span>
9 <div is-="separator" cap-="default edge"></div>
10 </div>
11 <div class="column">
12 <span>bisect default</span>
13 <div is-="separator" cap-="bisect default"></div>
14 </div>
15 </div>
16
1 body {
2 display: flex;
3 flex-direction: column;
4 gap: 1lh;
5 }
6 .column {
7 display: flex;
8 flex-direction: column;
9 }
10 div[direction-="y"] {
11 height: 2lh;
12 }

Reference

Properties

Use the following custom CSS properties to style separators

  • --separator-width: The width of the separator line
  • --separator-color: The color of the separator line
  • --separator-background: The background color of the separator behind the line
1 <p>The quick green dog</p>
2 <div is-="separator"></div>
3 <p>eats the lazy fox</p>
1 body {
2 display: flex;
3 flex-direction: column;
4 }
5 div[is-="separator"] {
6 --separator-width: 1px;
7 --separator-color: orange;
8 --separator-background: #444;
9 }

Extending

To extend the Separator stylesheet, define a CSS rule on the components layer

@layer components {
  input[type="checkbox"] {
    /* ... */
  }
}

Scope

  • All elements with the is-~="separator" selector
input[type="checkbox"] {
  /* ... */
}