border-inline-end-width

Baseline åºãå©ç¨å¯è½

border-inline-end-width ã¯ CSS ã®ããããã£ã§ãè¦ç´ ã®è«ççãªã¤ã³ã©ã¤ã³æ¹åã®çµç«¯å´ã®å¢çã®å¹ãå®ç¾©ãããããè¦ç´ ã®æ¸åæ¹åãããã¹ãã®æ¹åã«å¿ãã¦ç©ççãªå¢çã®å¹ã«å¯¾å¿ã¥ãããã¾ããããã¯ border-top-widthãborder-right-widthãborder-bottom-widthãborder-left-width ã®ããããã«å¯¾å¿ããã©ãã«å¯¾å¿ãããã¯ writing-modeãdirectionãtext-orientation ã§å®ç¾©ãããå¤ã«ãã£ã¦æ±ºã¾ãã¾ãã

è©¦ãã¦ã¿ã¾ããã

border-inline-end-width: thick;
writing-mode: horizontal-tb;

border-inline-end-width: thick;
writing-mode: vertical-rl;

border-inline-end-width: 4px;
writing-mode: horizontal-tb;
direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    ããã¯å¨å²ã«å¢çç·ãããããã¯ã¹ã§ãã
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

æ§æ

css

/* <'border-width'> å¤ */
border-inline-end-width: 2px;
border-inline-end-width: thick;

/* ã°ãã¼ãã«å¤ */
border-inline-end-width: inherit;
border-inline-end-width: initial;
border-inline-end-width: revert;
border-inline-end-width: revert-layer;
border-inline-end-width: unset;

é¢é£ããããããã£ã¨ãã¦ã¯ã border-block-start-widthãborder-block-end-widthãborder-inline-start-width ãè¦ç´ ã®ä»ã®å¢çã®å¹ãå®ç¾©ãã¾ãã

å¤

<'border-width'>: å¢çã®å¹ã§ãã border-width ãåç§ãã¦ãã ããã

å¬å¼å®ç¾©

åæå¤	`medium`
é©ç¨å¯¾è±¡	ãã¹ã¦ã®è¦ç´
ç¶æ¿	ãªã
è¨ç®å¤	the absolute `<length>`, snapped as a line width
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	è¨ç®å¤ã®åã«ãã

å½¢å¼ææ³

border-inline-end-width = 
  <line-width>  

<line-width> = 
  <length [0,â]>  |
  hairline        |
  thin            |
  medium          |
  thick

ä¾

ç¸¦æ¸ãããã¹ãã®å¢çã®é©ç¨

HTML

html

<div>
  <p class="exampleText">ããã¹ãã®ä¾</p>
</div>

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}