Borders

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

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

• Specialization
• @outputclass

<section border="yes" padding="2">
  <title>Bordered Section</title>
  <p>This section has a border.</p>
</section>

<div border="yes" rounded="yes" padding="2" margin="2">
  <p>This div has a border and rounded corners.</p>
</div>

<card border="yes" rounded="yes" margin="2" width="50">
  <title>Bordered Card</title>
  <p>This card has an explicit border and rounded corners.</p>
</card>

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

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

<section outputclass="card border rounded m-2 w-50">
  ...
</section>

// 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;
} 

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