CSS border-right-width Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: #f7f7f7;
}

.box {
    width: 160px;
    padding: 16px;
    border-style: solid;
    border-color: #333;
    border-right-width: 2px; /* default fallback */
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.box.thin {
    border-right-width: thin;
}

.box.medium {
    border-right-width: medium;
}

.box.thick {
    border-right-width: thick;
}

.box.custom {
    border-right-width: 12px;
}</style></head><body><div class="container">
    <div class="box thin">Border-right-width: thin</div>
    <div class="box medium">Border-right-width: medium</div>
    <div class="box thick">Border-right-width: thick</div>
    <div class="box custom">Border-right-width: 12px</div>
</div></body></html>