W3.CSS — Borders

Border Classes

W3.CSS provides border utility classes:

<div class="w3-border">Default border</div>
<div class="w3-border-top">Top border only</div>
<div class="w3-border-bottom">Bottom border only</div>
<div class="w3-border-left">Left border only</div>
<div class="w3-border-right">Right border only</div>

Border Styles

<!-- Round border -->
<div class="w3-round">Round border</div>
<div class="w3-round-small">Small round border</div>
<div class="w3-round-large">Large round border</div>
<div class="w3-round-xlarge">Extra large round border</div>

Border Colors

<div class="w3-border w3-border-red">Red border</div>
<div class="w3-border w3-border-blue">Blue border</div>
<div class="w3-border w3-border-green">Green border</div>
<div class="w3-border w3-border-orange">Orange border</div>

Border Width

<div class="w3-border w3-border-1px">1px border</div>
<div class="w3-border w3-border-2px">2px border</div>
<div class="w3-border w3-border-3px">3px border</div>

Border Combinations

<!-- Left border with color -->
<div class="w3-leftbar w3-border-blue">
    Left blue border
</div>

<!-- Right border with color -->
<div class="w3-rightbar w3-border-green">
    Right green border
</div>

<!-- Top border with color -->
<div class="w3-topbar w3-border-red">
    Top red border
</div>

<!-- Bottom border with color -->
<div class="w3-bottombar w3-border-orange">
    Bottom orange border
</div>

Border Examples

<!-- Card with border -->
<div class="w3-card-4 w3-border w3-round-large">
    <div class="w3-container">
        <h4>Card with Border</h4>
        <p>This card has a border and rounded corners.</p>
    </div>
</div>

<!-- Panel with left border -->
<div class="w3-panel w3-leftbar w3-border-indigo">
    <p><strong>Info:</strong> Important information here.</p>
</div>

Border Radius

<div class="w3-container w3-round w3-blue">Rounded corners</div>
<div class="w3-container w3-round-large w3-green">Large rounded corners</div>
<div class="w3-container w3-round-xlarge w3-red">Extra large rounded corners</div>

Mini Practice

Create HTML code that:

1. Creates a div with a colored border
2. Adds a panel with a left border
3. Creates a card with round corners
4. Uses different border colors

Up Next

Next: Learn about W3.CSS Fonts.