JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<ul class="bi">
<li>border-image: url() 2 repeat</li>
<li>image size 12px * 4px</li>
<li>border-bottom-width:1px</li>
<li>border-imageで表示</li>
</ul>
<ul class="bi">
<li>Twitterでもピグの最新情報をチェックができます！</li>
    <li>スマートフォンでピグのきせかえ、<br>
お買いものができるようになりました★</li>
<li>Twitterでもピグの最新情報をチェックができます！</li>
    <li>スマートフォンでピグのきせかえ、<br>
お買いものができるようになりました★</li>
</ul>
<ul class="bz">
<li>::after + height:4px + zoom:0.5</li>
<li>base64画像背景指定して50%縮小</li>
<li>background-repeat:repeat-x</li>
<li>本番のshopと同じ手法</li>
</ul>

<p class="border1">CSSでドット出す border:dotted 1px;</p>
<p class="border2">CSSでドット出す border:dotted 2px;</p>
<p class="dot">
    border-image:url() 100% repeat;<br>
    9px* 6px
</p>

<ul class="bg1">
<li>image 12px*4px; background-size:6px 2px</li>
<li>image 12px*4px; background-size:6px 2px</li>
<li>image 12px*4px; background-size:6px 2px</li>
<li>image 12px*4px; background-size:6px 2px</li>
</ul>
<ul class="bg2">
<li>image 9px*3px;</li>
<li>image 9px*3px; background-size:4px 1px<br>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>image 9px*3px; background-size:4px 1px</li>
<li>image 9px*3px; background-size:4px 1px<br>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
</ul>
<ul class="bg2">
<li>aaaaaaaa</li>
<li>aaaaaaaa</li>
<li>aaaaaaaa</li>
<li>aaaaaaaa</li>
</ul>
<ul class="bg2">
<li>image size 9px * 3px, background-size:4px 1px</li>
<li>Twitterでもピグの最新情報をチェックができます！</li>
<li>スマートフォンでピグのきせかえ、<br>
お買いものができるようになりました★</li>
</ul>

<ul class="bg3">
<li>image size 6px*2px, background-size:3px 1px</li>
    <li>aaaaaaaaaaaaa！</li>
    <li>スマートフォンでピグのきせかえ、<br>
お買いものができるようになりました★</li>
</ul>

<ul class="bg4">
    <li>image size 3px*1px</li>
    <li>Twitterでもピグの最新情報をチェックができます！</li>
    <li>スマートフォンでピグのきせかえ、<br>
お買いものができるようになりました★</li>
</ul>

CSS

p,ul,div {
    margin:1em;
    font-size:13px;
}
li {
    padding:1em;
    border:0;
}

.border1{
    border:1px #000 dotted;
}
.border2 {
    border:2px #000 dotted;
}

.bi li {
    color:blue;
  -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAECAYAAAC6Jt6KAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxMi4yLjj70IanAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABxJREFUCJljnDlz5n8GJJCWlsbIgAcw4ZMcGA0A9HwEBaHah6YAAAAASUVORK5CYII=") 2 round;
  -webkit-border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAECAYAAAC6Jt6KAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxMi4yLjj70IanAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABxJREFUCJljnDlz5n8GJJCWlsbIgAcw4ZMcGA0A9HwEBaHah6YAAAAASUVORK5CYII=") 2 round;
  -o-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAECAYAAAC6Jt6KAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxMi4yLjj70IanAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABxJREFUCJljnDlz5n8GJJCWlsbIgAcw4ZMcGA0A9HwEBaHah6YAAAAASUVORK5CYII=") 2 round;
    
  border-bottom-style:solid;
  border-bottom-width:1px;
}

.bz li:after {
 content:"";
 display:block;
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAADAQMAAAB7xLc1AAAAA3NCSVQICAjb4U/gAAAABlBMVEWZmZn///+D7jMZAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAFnRFWHRDcmVhdGlvbiBUaW1lADExLjExLjMwEG9IzgAAAA1JREFUCJljkG9gACMAB9oB3lavglEAAAAASUVORK5CYII=") repeat-x;
  width:100%;
  height:4px;
  zoom:0.5;

}

.dot{
    padding:1em;
  -moz-border-image:...

JavaScript

window.addEvent('domready', function(){
    $$('head').grab(new Element('meta', {name:"viewport",content:"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0"}));

});