Borders

Use border utilities to quickly style the border and border-radius of an element.

Borders

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

border border-top border-end border-bottom border-start

<ph outputclass="border">...</ph>
<ph outputclass="border-top">...</ph>
<ph outputclass="border-end">...</ph>
<ph outputclass="border-bottom">...</ph>
<ph outputclass="border-start">...</ph>

Border Specialization

The @border and @rounded attributes provide a semantic way to add borders and rounded corners.

Bordered Section

This section has a border.

This div has a border and rounded corners.

<section border="yes" padding="2">
  ...
</section>

<div border="yes" rounded="yes" padding="2" margin="2">
  ...
</div>

<carousel border="yes" rounded="yes" margin="2" width="50">
  <carousel-item>
    <image href="..."/>
  </carousel-item>
  <carousel-item>
    <image href="..."/>
  </carousel-item>
</carousel>

<section outputclass="border p-2">
  ...
</section>

<div outputclass="border rounded p-2 m-2">
  ...
</div>

<ul outputclass="carousel border rounded m-2 w-50">
  ...
</ul>

Border Styling

The @border attribute also accepts numeric values 1-5 for width. The @rounded attribute supports values 0-5, circle and pill. The @bordercolor attribute can be used to set the color of the border.

Width 1 Width 2 Width 3 Width 4 Width 5

<ph border="1">Width 1</ph>
<ph border="2">Width 2</ph>
<ph border="3">Width 3</ph>
<ph border="4">Width 4</ph>
<ph border="5">Width 5</ph>

<ph outputclass="border border-1">Width 1</ph>
<ph outputclass="border border-2">Width 2</ph>
<ph outputclass="border border-3">Width 3</ph>
<ph outputclass="border border-4">Width 4</ph>
<ph outputclass="border border-5">Width 5</ph>

Primary Primary subtle Success Danger

<ph bordercolor="primary">Primary</ph>
<ph bordercolor="primary-subtle">Primary subtle</ph>
<ph bordercolor="success">Success</ph>
<ph bordercolor="danger">Danger</ph>

<ph outputclass="border border-primary">Primary</ph>
<ph outputclass="border border-primary-subtle">Primary subtle</ph>
<ph outputclass="border border-success">Success</ph>
<ph outputclass="border border-danger">Danger</ph>

Rounded 0 Rounded 1 Rounded 2 Rounded 3 Rounded 4 Rounded 5

<ph border="yes" rounded="0">Rounded 0</ph>
<ph border="yes" rounded="1">Rounded 1</ph>
<ph border="yes" rounded="2">Rounded 2</ph>
<ph border="yes" rounded="3">Rounded 3</ph>
<ph border="yes" rounded="4">Rounded 4</ph>
<ph border="yes" rounded="5">Rounded 5</ph>

<ph outputclass="border rounded-0">Rounded 0</ph>
<ph outputclass="border rounded-1">Rounded 1</ph>
<ph outputclass="border rounded-2">Rounded 2</ph>
<ph outputclass="border rounded-3">Rounded 3</ph>
<ph outputclass="border rounded-4">Rounded 4</ph>
<ph outputclass="border rounded-5">Rounded 5</ph>

Circle Pill

<ph border="yes" rounded="circle" bordercolor="info">Circle</ph>
<ph border="yes" rounded="pill" bordercolor="dark">Pill</ph>

<ph outputclass="border rounded-circle border-info">Circle</ph>
<ph outputclass="border rounded-pill border-dark">Pill</ph>

Frame attribute support

For DITA elements which support the @frame attribute, such as <lines> and <codeblock>, additional frame borders are automatically added as shown:

// Simple C++ program to display "Hello World"

// Header file for input output functions
#include<iostream>

using namespace std;

// main function -
// where the execution of program begins
int main()
{
    // prints hello world
    cout<<"Hello World";
    return 0;
}

Shall I compare thee to a summer’s day?
Thou art more lovely and more temperate:
Rough winds do shake the darling buds of May,
and summer’s lease hath all too short a date:
...

Animal	Gestation
Elephant (African and Asian)	19-22 months
Giraffe	15 months
Rhinoceros	14-16 months
Hippopotamus	7 1/2 months

<codeblock frame="sides">...</codeblock>
<lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded">...</lines>
<table frame="all">...</table>