Lines

Line Styles

Solid
Dashed
Dotted
Double
Groove
Ridge
Inset
Outset
None
Hidden
Transparent
HTML 
<div class="ss-c-flex--col ss-c-gap--04">
            <hr class="ss-c-border--solid" style="border-width: 1px" />
            Solid
            <hr class="ss-c-border--dashed" style="border-width: 1px" />
            Dashed
            <hr class="ss-c-border--dotted" style="border-width: 1px" />
            Dotted
            <hr class="ss-c-border--double" style="border-width: 1px" />
            Double
            <hr class="ss-c-border--groove" style="border-width: 1px" />
            Groove
            <hr class="ss-c-border--ridge" style="border-width: 1px" />
            Ridge
            <hr class="ss-c-border--inset" style="border-width: 1px" />
            Inset
            <hr class="ss-c-border--outset" style="border-width: 1px" />
            Outset
            <hr class="ss-c-border--none" style="border-width: 1px" />
            None
            <hr class="ss-c-border--hidden" style="border-width: 1px" />
            Hidden
            <hr class="ss-c-border--transparent" style="border-width: 1px" />
            Transparent
        </div>

Border Styles

Solid
Dashed
Dotted
Double
Groove
Ridge
Inset
Outset
None
Hidden
Transparent
HTML 
<div class="ss-c-flex--col ss-c-gap--04">
            <div class="ss-c-border--solid" style="border-width: 1px">Solid</div>
            <div class="ss-c-border--dashed" style="border-width: 1px">Dashed</div>
            <div class="ss-c-border--dotted" style="border-width: 1px">Dotted</div>
            <div class="ss-c-border--double" style="border-width: 1px">Double</div>
            <div class="ss-c-border--groove" style="border-width: 1px">Groove</div>
            <div class="ss-c-border--ridge" style="border-width: 1px">Ridge</div>
            <div class="ss-c-border--inset" style="border-width: 1px">Inset</div>
            <div class="ss-c-border--outset" style="border-width: 1px">Outset</div>
            <div class="ss-c-border--none" style="border-width: 1px">None</div>
            <div class="ss-c-border--hidden" style="border-width: 1px">Hidden</div>
            <div class="ss-c-border--transparent" style="border-width: 1px">
                Transparent
            </div>
        </div>

Technical Line Types (CAD / Drafting)

Continuous — visible edges and outlines
Continuous thick — primary outlines
Hidden — concealed edges (short dashes)
Center — axes and symmetry (long-short)
Phantom — alternate positions (long-short-short)
Cutting plane — section cuts (heavy long-short)
Dash-dot — boundaries and property lines
Dotted — auxiliary geometry
Dimension / leader — measurement lines
Border — drawing frames and title blocks
HTML 
<div class="ss-c-flex--col ss-c-gap--04">
        <hr class="ss-a-line ss-a-line--continuous" />
        Continuous — visible edges and outlines
        <hr class="ss-a-line ss-a-line--thick" />
        Continuous thick — primary outlines
        <hr class="ss-a-line ss-a-line--hidden" />
        Hidden — concealed edges (short dashes)
        <hr class="ss-a-line ss-a-line--center" />
        Center — axes and symmetry (long-short)
        <hr class="ss-a-line ss-a-line--phantom" />
        Phantom — alternate positions (long-short-short)
        <hr class="ss-a-line ss-a-line--cutting" />
        Cutting plane — section cuts (heavy long-short)
        <hr class="ss-a-line ss-a-line--dashdot" />
        Dash-dot — boundaries and property lines
        <hr class="ss-a-line ss-a-line--dotted" />
        Dotted — auxiliary geometry
        <hr class="ss-a-line ss-a-line--dimension" />
        Dimension / leader — measurement lines
        <hr class="ss-a-line ss-a-line--border" />
        Border — drawing frames and title blocks
    </div>