CSS border-top-style Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.examples {
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.box {
    padding: 12px 16px;
    background: #f8f9fb;
    border-radius: 6px;
    border-top-width: 6px;
    border-top-style: solid;
    border-top-color: #1a73e8;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    text-transform: capitalize;
}

.box.solid { border-top-style: solid; }
.box.dashed { border-top-style: dashed; }
.box.dotted { border-top-style: dotted; }
.box.double { border-top-style: double; }
.box.groove { border-top-style: groove; }
.box.ridge { border-top-style: ridge; }
.box.inset { border-top-style: inset; }
.box.outset { border-top-style: outset; }
.box.none { border-top-style: none; }
.box.hidden { border-top-style: hidden; }
</style></head><body><div class="examples">
    <h2>border-top-style examples</h2>
    <div class="grid">
        <div class="box solid">solid</div>
        <div class="box dashed">dashed</div>
        <div class="box dotted">dotted</div>
        <div class="box double">double</div>
        <div class="box groove">groove</div>
        <div class="box ridge">ridge</div>
        <div class="box inset">inset</div>
        <div class="box outset">outset</div>
        <div class="box none">none</div>
        <div class="box hidden">hidden</div>
    </div>
</div></body></html>