≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ(@bc_rikko)

border-blockで論理的なブロック方向にボーダーを引く

Logical Propertiesのひとつであるborder-blockを使うことで、論理的なブロック方向にボーダーを引くことができる。

「論理的なブロック方向」とは縦書き、横書き、右から読む、左から読むなど言語によってwriting-modeが異なっても、意味的に正しい方向を指す。

<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
h1 {
  border-block-end: solid 4px;
}

デモ

English

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

日本語

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

ブラウザ対応状況