logo
English

导航菜单

Documents

Border Property

Introduction

The border property is a common attribute in the Cosy UI component library, used to set the border style of components. It supports multiple border sizes and colors, providing unified visual hierarchy.

Border Sizes

Available Options

  • none - No border
  • sm - Thin border (1px)
  • md - Medium border (2px)
  • lg - Thick border (4px)
  • xl - Extra thick border (8px)

无边框

border="none"

细边框 (1px)

border="sm"

中等边框 (2px)

border="md"

粗边框 (4px)

border="lg"

超粗边框 (8px)

border="xl"

Border Colors

Available Colors

  • primary - Primary color border
  • secondary - Secondary color border
  • accent - Accent color border
  • neutral - Neutral color border
  • success - Success color border
  • warning - Warning color border
  • error - Error color border
  • info - Info color border
  • base-100 - Base-100 color border
  • base-200 - Base-200 color border
  • base-300 - Base-300 color border
  • transparent - Transparent border
  • none - No border color

primary

borderColor="primary"

success

borderColor="success"

error

borderColor="error"

primary/50

borderColor="primary/50"

Opacity Variants

Each color supports opacity variants with the format color/opacity:

  • primary/10 - Primary color with 10% opacity
  • primary/20 - Primary color with 20% opacity
  • primary/30 - Primary color with 30% opacity
  • primary/40 - Primary color with 40% opacity
  • primary/50 - Primary color with 50% opacity
  • primary/60 - Primary color with 60% opacity
  • primary/70 - Primary color with 70% opacity
  • primary/80 - Primary color with 80% opacity
  • primary/90 - Primary color with 90% opacity

The same opacity variants are available for all colors (secondary, accent, neutral, success, warning, error, info, base-100, base-200, base-300).

Usage

In Components

<Container border="sm">
  Thin border container
</Container>

<Container border="md">
  Medium border container
</Container>

<Container border="lg">
  Thick border container
</Container>

<Container border="md" borderColor="primary">
  Primary color border
</Container>

<Container border="lg" borderColor="success/50">
  Semi-transparent success border
</Container>

In Builder Pattern

const props = ContainerProps()
  .border("md")
  .borderColor("primary")
  .build();

<Container {...props}>
  Builder pattern border setting
</Container>

The following components support the border property:

  • Container - Container component
  • Card - Card component
  • Button - Button component
  • Alert - Alert component
  • Badge - Badge component
  • Modal - Modal component

搜索