cssで境界線を二重に表示するにはどうすれば良いですか？

ボックスに色の異なる二重線をつけたいと思っています。

いろいろググってみたのですが、下記のサイトのように二重線の間に隙間があるものばかりで、２つの線がぴったりくっついてるようなものがありませんでした。
https://www.sejuku.net/blog/50370

冒頭の画像のようなボーダーをつけるにはどのようにcssを記述したら良いでしょうか？
よろしくお願いします。

行動規範の内容に同意します

回答3件

参考情報

もう悩まない！CSSのみで二重線をつける方法

https://www.sejuku.net/blog/50370

CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説

https://jajaaan.co.jp/css/css-headline/

CSS Border

https://www.tutorialrepublic.com/css-tutorial/css-border.php

投稿2020/11/21 23:06

katoy

総合スコア22324

内側のborderには擬似要素を使うというやり方もあります。

css
1.border-double {
2	border: 2px solid #52ff00;
3	position: relative;
4}
5
6.border-double::before {
7	display: block;
8	width: calc(100% - 4px);
9	height: calc(100% - 4px);
10	content: "";
11	border: 2px solid #ffab00;
12	position: absolute;
13	top: 0;
14	left: 0;
15}

html
1<div class="border-double" style="padding: 1rem; width: 500px; height: 300px;">
2  test
3</div>

投稿2020/11/21 18:08

cerfweb

総合スコア1899

ベストアンサー

box-shadowで外側の線を、borderで内側の線を描くなど

CSS
1div {
2  width: 600px;
3  height: 400px;
4  margin: 30px;
5  box-shadow: 0 0 0 10px #01FA00;
6  border: solid 10px #FF9400;
7}

追記: outlineも使って三重

CSS
1div {
2  width: 600px;
3  height: 400px;
4  margin: 30px;
5  box-shadow: 0 0 0 20px #01FA00;
6  outline: solid 10px #CF88EC;
7  border: solid 10px #FF9400;
8}

追記: cerfwebさん回答の疑似要素も使って九重 (コード中のカラーは上が外側、下に行くほど内側の色となるよう並べてあります)

CSS
1div {
2  width: 600px;
3  height: 400px;
4  margin: 30px;
5  box-shadow: 0 0 0 20px #ffadad;  /* 一番外側の色 */
6  outline: solid 10px #ffd6a5;
7  border: solid 10px #fdffb6;
8  position: relative;
9  padding: 30px;
10}
11div::after {
12  display: block;
13  position: absolute;
14  width: calc(100% - 60px);
15  height: calc(100% - 60px);
16  content: "";
17  margin: 50px;
18  box-shadow: 0 0 0 20px #caffbf;
19  outline: solid 10px #9bf6ff;
20  border: solid 10px #a0c4ff;
21  top: -30px;
22  left: -30px;
23}
24div::before {
25  display: block;
26  position: absolute;
27  width: calc(100% - 120px);
28  height: calc(100% - 120px);
29  content: "";
30  margin: 20px;
31  box-shadow: 0 0 0 20px #bdb2ff;
32  outline: solid 10px #ffc6ff;
33  border: solid 10px #eddcd2;  /* 一番内側の色 */
34}