Border

Last updated: 18 days ago

Category: Basic

The _bd or _bd-* classes represent standalone border styling (outline-like borders) that can be applied to any element. These styles support border positioning and sizing, with all _bd[-*] variants us...

Box Shadow18 days agoBorder Radius18 days agoBorder18 days ago

Introduction

This framework defines a set of border class names that can specify border thickness, position, color, and type. Simply use the _bd style class to implement solid borders.

Output
HTML

Box content
```
                
                
            
```

Border Thickness

The default border thickness is 1px. The border thickness style group includes _bd-0, _bd-1 to _bd-10, representing thicknesses from 0~10px.

Output
HTML

(_bd-0) Box content

(_bd-1) Box content

(_bd-2) Box content

(_bd-3) Box content

(_bd-4) Box content

(_bd-5) Box content

(_bd-6) Box content

(_bd-7) Box content

(_bd-8) Box content

(_bd-9) Box content

(_bd-10) Box content
```
                
                
            
```

Border Types

The default border type is solid. The border type style group includes _bd-solid (solid line), _bd-dashed (short dash line), and _bd-dotted (dotted line).

Output
HTML

(_bd-6 _bd-solid) Box content

(_bd-6 _bd-dashed) Box content

(_bd-6 _bd-dotted) Box content
```
                
                
            
```

Border Colors

The default border color is light gray. The border color style group includes _prim, _bd-error, _bd-succ, _bd-info, _bd-warn, _bd-issue, _bd-text, _bd-brief, _bd-caption, and their light variants with -lt suffix.

Output
HTML

(_bd-2 _bd-prim) Box content

(_bd-2 _bd-error) Box content

(_bd-2 _bd-text) Box content

(_bd-2 _bd-prim-lt) Box content

(_bd-2 _bd-error-lt) Box content

(_bd-2 _bd-text-lt) Box content
```
                
                
            
```

Border Positions

The default border surrounds all sides. We also provide six border positions: _bd-s (start/left), _bd-e (end/right), _bd-t (top), _bd-b (bottom), _bd-se (start+end), _bd-tb (top+bottom).

Output
HTML

(_bd-se) Box content

(_bd-tb) Box content
```
                
                
            
```

Different types of class names can be combined, for example _bd-2 _bd-s represents a 2px solid border on the left side.

Class Name	Description	Example
_bd	Standard 1px solid border	`<div class="_bd"></div>`
_bd-0	No border, border:0	-
_bd-1	1px border, border-width:1px, same as _bd	-
_bd-2	2px border, border-width:2px	-
_bd-3	3px border, border-width:3px	-
_bd-[4~10]	4px~10px borders	-
_bd-s	Left border (start)	-
_bd-e	Right border (end)	-
_bd-t	Top border	-
_bd-b	Bottom border	-
_bd-se	Left+right borders (start+end)	-
_bd-tb	Top+bottom borders	-
_bd-solid	Solid border, same as _bd	-
_bd-dashed	Dashed border	-
_bd-dotted	Dotted border	-
_bd-prim	Primary theme color border, -lt for light variant	-
_bd-error	Error theme color border, -lt for light variant	-
_bd-succ	Success theme color border, -lt for light variant	-
_bd-info	Info theme color border, -lt for light variant	-
_bd-warn	Warning theme color border, -lt for light variant	-
_bd-issue	Issue theme color border, -lt for light variant	-
_bd-text	Text theme color border, -lt for light variant	-
_bd-brief	Brief theme color border, -lt for light variant	-
_bd-caption	Caption theme color border, -lt for light variant	-