Skip to content

Latest commit

 

History

History
129 lines (105 loc) · 4.98 KB

border-style.mdx

File metadata and controls

129 lines (105 loc) · 4.98 KB

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "border-style"; export const description = "Utilities for controlling the style of an element's borders.";

<ApiTable rows={[ ["border-solid", "border-style: solid;"], ["border-dashed", "border-style: dashed;"], ["border-dotted", "border-style: dotted;"], ["border-double", "border-style: double;"], ["border-hidden", "border-style: hidden;"], ["border-none", "border-style: none;"], ["divide-solid", "& > :not(:last-child) {\n border-style: solid;\n}"], ["divide-dashed", "& > :not(:last-child) {\n border-style: dashed;\n}"], ["divide-dotted", "& > :not(:last-child) {\n border-style: dotted;\n}"], ["divide-double", "& > :not(:last-child) {\n border-style: double;\n}"], ["divide-hidden", "& > :not(:last-child) {\n border-style: hidden;\n}"], ["divide-none", "& > :not(:last-child) {\n border-style: none;\n}"], ]} />

Examples

Basic example

Use utilities like border-solid and border-dotted to control an element's border style:

{

border-solid

Button A

border-dashed

Button A

border-dotted

Button A

border-double

Button A
} 
<!-- [!code classes:border-solid,border-dashed,border-dotted,border-double] -->
<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>

Removing a border

Use the border-none utility to remove an existing border from an element:

{
Save Changes
} 
<!-- [!code classes:border-none] -->
<button class="border-none ...">Save Changes</button>

This is most commonly used to remove a border style that was applied at a smaller breakpoint.

Setting the divider style

Use utilities like divide-dashed and divide-dotted to control the border style between child elements:

{
01
02
03
} 
<!-- [!code classes:divide-dashed] -->
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Responsive design