practice

<p style="font-size:24px;color:red;">border-style の値 : <span id="すたいる_情報"></span></p>
<button onclick="わくすたいる('inherit');">初期設定</button>
<button onclick="わくすたいる('none');">無し</button>
<button onclick="わくすたいる('solid');">ソリッド</button>
<button onclick="わくすたいる('double');">ダブル</button>
<button onclick="わくすたいる('dotted');">ドット</button>
<button onclick="わくすたいる('dashed');">ダッシュ</button>
<br>
<button onclick="わくすたいる('dotted dashed');">ドット & ダッシュ</button>
<button onclick="わくすたいる('groove');">エンボス</button>
<button onclick="わくすたいる('ridge');">逆エンボス</button>
<button onclick="わくすたいる('inset');">ミラー</button>
<button onclick="わくすたいる('outset');">逆ミラー</button>
<button onclick="わくすたいる('solid double dotted dashed');">ソリッド / ダブル / ドット / ダッシュ</button>
<br>
<div id="わくすたいる_目印"style="border:solid 20px gray;background-color:white;margin:20px;width:100px;height:100px;">
</div>

<hr>
<p style="font-size:24px;color:green;">border-color の値 : <span id="わく色_情報"></span></p>
<button onclick="わく色('inherit');">初期設定</button>
<button onclick="わく色('transparent');">透明</button>
<button onclick="わく色('red');">レッド</button>
<button onclick="わく色('green');">グリーン</button>
<button onclick="わく色('blue');">ブルー</button>
<br>
<button onclick="わく色('red white white white');">上レッド</button>
<button onclick="わく色('white green white white');">右グリーン</button>
<button onclick="わく色('white white blue white');">下ブルー</button>
<button onclick="わく色('white white white yellow');">左イエロー</button>
<br>
<button onclick="わく色('red green');">レッド / グリーン</button>
<button onclick="わく色('red green blue');">レッド / グリーン / ブルー</button>
<button onclick="わく色('red blue green yellow');">レッド / グリーン / ブルー / イエロー</button>
<div id="わく色_目印"style="display:flex;width:100px;height:100px;border:16px solid black;background-color:#ffffff;margin:40px 40px;text-align:center;font-size:40px;flex-direction:column;justify-content:center;border-radius:50%;">色</div>

<hr>
<p style="font-size:24px;color:blue;">border-width の値 : <span id="太さ_情報"></span></p>
<button onclick="わく太さ('0px');">無し</button>
<button onclick="わく太さ('1px');">1px</button>
<button onclick="わく太さ('2px');">2px</button>
<button onclick="わく太さ('3px');">3px</button>
<button onclick="わく太さ('4px');">4px</button>
<button onclick="わく太さ('5px');">5px</button>
<button onclick="わく太さ('6px');">6px</button>
<button onclick="わく太さ('7px');">7px</button>
<button onclick="わく太さ('8px');">8px</button>
<button onclick="わく太さ('9px');">9px</button>
<br>
<button onclick="わく太さ('10px');">10px</button>
<button onclick="わく太さ('11px');">11px</button>
<button onclick="わく太さ('12px');">12px</button>
<button onclick="わく太さ('13px');">13px</button>
<button onclick="わく太さ('14px');">14px</button>
<button onclick="わく太さ('15px');">15px</button>
<button onclick="わく太さ('16px');">16px</button>
<button onclick="わく太さ('17px');">17px</button>
<button onclick="わく太さ('18px');">18px</button>
<div id="太さ_目印"style="display:flex;width:100px;height:100px;border:16px solid black;background-color:#ffffff;margin:40px 40px;text-align:center;font-size:40px;flex-direction:column;justify-content:center;border-radius:50%;">太さ</div>
<hr>
<p><button onclick="わく_みっくす_01()">ミックス</button></p>
<br>
<span id="みっくす_スタイル_01">文字</span>
<hr>
<p>style.fontSize="40px";</p><p>style.color="red";</p><p>style.borderWidth="10px";</p><p>style.borderColor="silver";</p><p>style.borderTopColor="red";</p><p>style.borderRightColor="green";</p><p>style.borderBottomColor="blue";</p><p>style.borderStyle="dotted";</p><p>style.borderTopStyle="solid";</p><p>style.borderRightStyle="groove";</p><p>style.borderBottomStyle="double";</p><p>style.borderRadius="16px";</p>

function わく色(わく色_ちぇんじ)
{let 表示=document.getElementById("わく色_目印");
表示.style.borderColor=わく色_ちぇんじ;
document.getElementById("わく色_情報").innerHTML=わく色_ちぇんじ;}

function わく太さ(わく太さ_ちぇんじ)
{let 表示=document.getElementById("太さ_目印");
表示.style.borderWidth=わく太さ_ちぇんじ;
document.getElementById("太さ_情報").innerHTML=わく太さ_ちぇんじ;}

function わく_みっくす_01()
{document.getElementById("みっくす_スタイル_01");
みっくす_スタイル_01.style.fontSize="40px";
みっくす_スタイル_01.style.color="red";
みっくす_スタイル_01.style.borderWidth="10px";
みっくす_スタイル_01.style.borderColor="silver";
みっくす_スタイル_01.style.borderTopColor="red";
みっくす_スタイル_01.style.borderRightColor="green";
みっくす_スタイル_01.style.borderBottomColor="blue";
みっくす_スタイル_01.style.borderStyle="dotted";
みっくす_スタイル_01.style.borderTopStyle="solid";
みっくす_スタイル_01.style.borderRightStyle="groove";
みっくす_スタイル_01.style.borderBottomStyle="double";
みっくす_スタイル_01.style.borderRadius="16px";}
</script>

</html>