CSS border-inline-start Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic layout */
.container {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 700px;
    margin: 24px auto;
    line-height: 1.4;
    color: #1f2937;
}

h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
}

/* Boxes demonstrating border-inline-start */
.box {
    border-inline-start: 8px solid #2563eb; /* blue start edge */
    background: #f8fafc;
    padding: 16px;
    margin: 12px 0;
    border-radius: 6px;
}

/* For clarity, align RTL text to the right */
.box[dir="rtl"] {
    text-align: right;
}
</style></head><body><div class="container">
    <h2>border-inline-start example</h2>

    <div class="box" dir="ltr">
        <p>Left-to-right (LTR): border-inline-start appears on the left.</p>
    </div>

    <div class="box" dir="rtl">
        <p>Right-to-left (RTL): border-inline-start appears on the right.</p>
    </div>
</div></body></html>