Borders

Canvas provides legacy utility classes for adding borders and rounded corners to elements. These include classes such as border, border-trbl, and border-round. They come from an older Canvas style guide and may change in future, but still work for styling content created in the Rich Content Editor.

For new content, you can also use standard CSS properties such as border and border-radius directly in inline styles. The sections below show both approaches.

Useful references

• MDN: border
• MDN: border-radius

Content box with border (Canvas legacy classes)

This example shows a content box with padding and a border on all sides using content-box pad-box-mini and border border-trbl. These classes are part of Canvas' legacy CSS.

<div class="content-box pad-box-mini border border-trbl">
  <h5>Example content box</h5>
  <p>
    This box uses <code>content-box pad-box-mini border border-trbl</code>
    for spacing and a border on all sides.
  </p>
</div>

Full border (Canvas legacy classes)

Use border border-trblto apply a border to all sides of an element using Canvas' legacy border utilities.

<div class="border border-trbl">
  Full border using <code>border border-trbl</code>.
</div>

Partial borders (Canvas legacy classes)

Combine border with directional classes such as border-rbl or border-b to apply borders to specific sides only. These helpers are part of the older Canvas style guide.

<div class="border border-rbl">Right, bottom, left border</div>

<div class="border border-tbl">Top, bottom, left border</div>

<div class="border border-bl">Bottom, left border</div>

<div class="border border-tl">Top, left border</div>

<div class="border border-b">Bottom border only</div>

<div class="border border-t">Top border only</div>

Border radius (Canvas legacy classes)

Use border-round and related classes to round all corners or specific corners of a bordered element. Under the hood, these classes use the standard border-radius property.

<div class="border border-trbl border-round">All corners rounded</div>

<div class="border border-trbl border-round-b">Bottom corners rounded</div>

<div class="border border-trbl border-round-t">Top corners rounded</div>

<div class="border border-trbl border-round-tl">Top-left corner rounded</div>

Modern borders with inline CSS

For new content, you can rely on standard CSS properties directly in inline styles. This removes the dependency on Canvas-specific classes and matches how borders are defined in modern web development.

The examples below use only inline styles for border, border-radius, and spacing.

Simple bordered box

<div style="border: 1px solid #d0d7de; padding: 0.75rem; margin-bottom: 1rem; background: #ffffff;">
  <p style="margin: 0">
    This box uses <code>border: 1px solid #d0d7de;</code> and
    <code>padding: 0.75rem;</code> applied directly as inline styles.
  </p>
</div>

Left border callout

You can create callout panels by applying a thicker border to one side only, combined with padding and background colour.

<div style="border-left: 4px solid #0000cd; padding: 0.75rem 1rem; margin-bottom: 1rem; background: #f5f7ff;">
  <strong>Callout heading</strong>
  <p style="margin: 0.5rem 0 0">
    This callout uses <code>border-left: 4px solid #0000cd;</code> to
    emphasise the block without adding borders on all sides.
  </p>
</div>

Rounded panels and pill-style badges

Rounded corners are controlled with border-radius. Larger values create softer corners, and very large values can create pill-shaped elements.

<div style="border: 1px solid #d0d7de; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.75rem; background: #f9fafb;">
  <p style="margin: 0">
    This panel uses <code>border-radius: 0.5rem;</code> for gently rounded corners.
  </p>
</div>

<div style="border: 1px solid #d0d7de; border-radius: 999px; padding: 0.5rem 1.25rem; display: inline-block; margin-bottom: 1rem; background: #eef6ff;">
  <span>Example pill badge with rounded edges</span>
</div>

Accessibility notes

• Do not rely on borders alone to convey meaning. If the border is used to highlight important information, include a clear text label such as a heading or descriptor.
• Light grey borders may be difficult for some learners to see. This does not fail WCAG, but consider using slightly stronger colours when the border is important for comprehension.
• Avoid using borders to mimic interactive controls such as buttons or input fields unless Canvas provides the underlying behaviour. This prevents confusion for screen reader and keyboard users.