Borders

Canvas uses Bootstrap 5 border utilities and adds width, style, and extended radius helpers.

Add or remove borders

.border, .border-0, and per side: .border-top, .border-bottom, .border-start, .border-end, plus removal .border-top-0, .border-bottom-0, .border-end-0.

Border width

Class	Width
`.border-1` to `.border-5`	Bootstrap width steps
`.border-width-0` to `.border-width-6`	Canvas width scale

Border style (Canvas)

Class	Style
`.border-dashed`	dashed
`.border-dotted`	dotted
`.border-double`	double

Border color

Theme and semantic: .border-primary, .border-secondary, .border-dark, .border-light, .border-info, .border-danger, .border-color, .border-default, plus subtle variants like .border-danger-subtle, .border-dark-subtle. The contrast scale applies: .border-contrast-0 to .border-contrast-1000. There is also .border-f5 (a #f5f5f5 hairline).

Rounded corners

Class	Effect
`.rounded-0` to `.rounded-6`	Radius scale
`.rounded-circle`	Full circle
`.rounded-pill`	Pill shape
`.rounded-top`, `.rounded-bottom`, `.rounded-start`, `.rounded-end`	Per side
`.rounded-top-1`..`.rounded-top-5`, `.rounded-end-*`, etc.	Per side with radius step
`.rounded-top-pill`, `.rounded-bottom-pill`, `.rounded-start-pill`, `.rounded-end-pill`	Per side pill
`.rounded-top-circle`, `.rounded-bottom-circle`, etc.	Per side circle
`.rounded-top-left-0`, `.rounded-top-right-0`, `.rounded-bottom-left-0`, `.rounded-bottom-right-0`	Square a single corner

Usage

<div class="border border-2 border-contrast-300 border-dashed rounded-4 p-4">
  Dashed, adaptive border with a large radius.
</div>

<img src="avatar.jpg" class="rounded-circle border border-3 border-light" alt="">

Classes

Class	Description
`.border-width-*`	Applies the defined Border Width on the element. Hover Use `.h-border-width-{value}` to apply the Border Width on Hover Example: [ch_pre] [/ch_pre]
`.border-dotted`	Sets the `border-style` CSS Property to dotted
`.border-dashed`	Sets the `border-style` CSS Property to dashed
`.border-solid`	Sets the `border-style` CSS Property to solid
`.border-double`	Sets the `border-style` CSS Property to double
`Bootstrap Border Colors`	Canvas has Option to extend the Bootstrap's Border Colors so that they can be applied on Hovers. Example: For `.border-primary` to be applied on Hover, use `.h-border-primary` instead
`.border-ts`	Applies Border Transitions on the Element Example: [ch_pre] [/ch_pre]

Was this page helpful?