🧱 CSS border-inline & border-block — Complete Tutorial

🌐 What Are border-inline & border-block?

border-inline and border-block are **logical border properties** in CSS. They apply borders based on the writing mode (LTR, RTL, vertical) instead of physical directions like border-left or border-top.

  • 🌍 Writing-mode aware
  • ↔ Auto-adjust for RTL languages
  • ↕ Adjust for vertical text flows
>>“Logical borders help build global-ready layouts without rewriting styles for RTL.”

Note

✔ Works with writing-mode
✔ Replaces border-left/right/top/bottom
✔ Great for internationalized UI

📦 Syntax

border-inline & border-block syntax

border-inline: <width> <style> <color>;
border-inline-start: <width> <style> <color>;
border-inline-end: <width> <style> <color>;

border-block: <width> <style> <color>;
border-block-start: <width> <style> <color>;
border-block-end: <width> <style> <color>;

📌 Understanding Logical Directions

Logical SideLTR EquivalentRTL Equivalent
inline-startleftright
inline-endrightleft
block-starttoptop
block-endbottombottom

📌 1. Basic Inline Border

border-inline example

.box {
  border-inline: 3px solid #4caf50;
}

Equivalent to setting:
border-left & border-right in LTR
Flips automatically for RTL.

📌 2. Set Different Start and End Inline Borders

Start & end inline borders

.box {
  border-inline-start: 4px solid crimson;
  border-inline-end: 4px dashed skyblue;
}

📌 3. Add Block Borders (Top & Bottom)

border-block example

.card {
  border-block: 2px solid gray;
}

Equivalent to:
border-top & border-bottom

📌 4. Different Block Start & End Borders

block-start-end

.card {
  border-block-start: 5px solid #009688;
  border-block-end: 5px solid #ff5722;
}

📌 5. Writing-Mode Aware Borders

Vertical writing mode example

.poem {
  writing-mode: vertical-rl;
  border-inline: 3px solid orange; /* now top & bottom */
  border-block: 3px solid blue;   /* now left & right */
}

Logical borders automatically switch meaning based on writing mode.

📌 6. Full Component Using Logical Borders

Full component example

.panel {
  padding: 1rem;
  border-block-start: 4px solid #1e88e5;
  border-inline-end: 4px solid #e53935;
}

Clean, minimal component that adapts globally.

🧪 Real-World Use Cases

1️⃣ Sidebar That Works in LTR & RTL

Sidebar example

.sidebar {
  border-inline-end: 2px solid #ccc;
}

In RTL, the border automatically shifts to the left side.

2️⃣ Blog Article Divider

Article divider

.article {
  border-block-end: 1px solid #ddd;
}

3️⃣ Form Fields with Consistent Padding & Borders

Form field

.input-field {
  border-inline: 1px solid #aaa;
  border-block: 1px solid #aaa;
}

⚠️ Common Mistakes

  • ❌ Using border-left/right instead of logical borders in RTL layouts
  • ❌ Forgetting writing-mode affects inline/block directions
  • ❌ Over-mixing physical & logical borders → unpredictable layout

Note

Logical properties should be used consistently for fully international-ready CSS.

🔥 Summary

border-inline andborder-block allow you to create borders that adapt to writing direction and language automatically. They simplify global styling and make your layouts more flexible and future-proof.

>>“Think in logical directions — not left/right — to build truly global UI.”

Learn more →MDN: border-inline
MDN: border-block 📘