1083848-1-inline-border.html (897B)
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @font-face { 7 font-family: dejavu; 8 src: url(../fonts/DejaVuSansMono.woff); 9 } 10 .test { 11 margin:10px; 12 border:1px solid blue; 13 font-family: dejavu; 14 font-size: 16px; 15 word-break:break-all; 16 text-orientation:upright; 17 width:6.5em; 18 height:6.5em; 19 } 20 21 .h { writing-mode:horizontal-tb; width: 4.2em; } 22 .v-lr { writing-mode:vertical-lr; } 23 .v-rl { writing-mode:vertical-rl; } 24 25 b { 26 background-color: yellow; 27 } 28 29 .bh { 30 border-left: 3px solid cyan; 31 border-right: 3px solid magenta; 32 } 33 34 .bv { 35 border-top: 3px solid cyan; 36 border-bottom: 3px solid magenta; 37 } 38 </style> 39 </head> 40 41 <body> 42 43 <div class="test h">ABCDE<b class="bh">FGHIJKLMNOPQRST</b>UVWXYZ</div> 44 45 <div class="test v-lr">ABCDE<b class="bv">FGHIJKLMNOPQRST</b>UVWXYZ</div> 46 47 <div class="test v-rl">ABCDE<b class="bv">FGHIJKLMNOPQRST</b>UVWXYZ</div> 48 49 </body> 50 </html>