WordPressおしゃれな点線ドット囲み枠をCSSコードをコピペで作る

/**点線(ドット)ピンク**/
.dot_box1 {
margin: 2em auto;
padding:2em;/**内側余白**/
border:dotted 3px #e2c2b3;/**線の種類 太さ 色**/
}

/**外枠が点線の囲み枠**/
.dot_box2 {
padding: 1em 1.5em;
margin: 2em 0;
margin: 1.5em auto;
background: #fff7f9; /* 背景色 /
border: 2px dashed #f79eb6; / **線の色** /
width: 95%; box-shadow: 2px 5px 5px #fff7f9; /**影の色**/
}

.dot_box2 p {
margin: 0;
padding: 1em;
}

/点線囲みピンク/

.dot_box3 {
padding: 1em 1.5em;
margin: 2em 0;
color: #565656;/**文字の色**/
background: #f7efeb;/**背景色**/
box-shadow: 0px 0px 0px 7px #f7efeb;/**ボックス影の色**/
border: dashed 2px #c4ada1;/**点線種類 *太さ *点線の色**/
border-radius: 9px;
}
.dot_box3 p {
margin: 0;
padding: 0;
}

/**点線囲みオレンジ**/

.dot_box4 {
padding: 1em 1.5em;
margin: 2em 0;
background-color: #fff4ea;/**背景色**/
box-shadow: 0 0 0 7px #fff4ea;/**背景色外側**/
border: 2px dashed #ffbf7f;/**線太さ 形 **/
border-radius: 9px;/**角の丸み**/
color: #000000;/**文字色**/
}
.dot_box4 p {
margin: 0;
padding: 0;
}

/** 茶ステッチ点線囲み枠**/
.dot_box5{
margin: 2em auto;
padding:2em;/**内側余白**/
position: relative; padding:1.5em !important;
z-index: 0;
background-color:#F5F1E8;/**背景色**/
}

.dot_box5:before{
position: absolute;
border: 2px dashed #A7A297;/**破線の太さ 色**/
content: ”;
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:4px;
z-index: -1;
border-radius:10px;
}

/**左上にずらしたタブボックス背景色あり**/
.tab_box1{
margin: 2em auto; /**ボックスの余白**/
background-color: #fafafa; /**ボックス背景色**/
padding:3em 2em 2em; /**ボックス内側余白**/
position:relative; /**配置(ここを基準に)**/
border: 1px solid #5a728b; /**ボックスの線 (太さ 種類 色)**/
}
.tab_box1 .box-title {
background-color:#5a728b; /**タイトル背景色**/
font-size: 1em;/**タイトル文字の大きさ**/
color: #fff ; /**タイトル文字色**/
padding: 7px 10px;/**タイトルの余白**/
line-height: 1;/**タイトルの行の高さ**/
position:absolute; /**配置(ここを動かす)**/
top: -10px; /**上から（0px）移動**/
left: 20px; /**左から(0px)移動**/
}

/**両端に三角形をつける**/
.point_box{
margin: 2em auto;
padding:2em;
position: relative;
border:1px solid #c6d4c6;
}

.point_box:before{
border-bottom:30px solid transparent;
border-left:30px solid #c6d4c6;
content: ”;
display: block;
position: absolute;
top: 0px;
left: 0px;
}

.point_box:after{
border-left:30px solid transparent;
border-bottom:30px solid #c6d4c6;
content: ”;
display: block;
position: absolute;
bottom: 0px;
right: 0px;
}

/**考え事黄色**/
.speech_box {
position: relative;
margin: 2em 0 2em 40px;
padding: 8px 15px;
background: #fff0c6;/**背景色**/
border-radius: 30px;
}
.speech_box:before{
font-family: “Font Awesome 5 Free”;
content: “\f111”;/**アイコン**/
font-weight: 900;
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #fff0c6;/**アイコンカラー**/
}
.speech_box:after{
font-family: “Font Awesome 5 Free”;
content: “\f111”;/**アイコン種類**/
font-weight: 900;
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #fff0c6;
}
.speech_box p {
margin: 0;
padding: 0;
}

/**吹き出し青**/

.speech_box1 {
position: relative;
display: inline-block;/**おまじない**/
padding: 0.5em 0.7em;
margin: 2em 0;
background: #e6f4ff;/**背景色**/
color: #5c98d4;/**文字カラー**/
font-weight: bold;
}
.speech_box1:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e6f4ff;
width: 0;
height: 0;
}
.speech_box1 p {
margin: 0;
padding: 0;
}

/**ボード風の囲み枠**/
.board_box {
position: relative;
margin: 2em auto;
padding: 2em 1em 1em;
width: 90%;
background: #fffff9; /**ボックス背景色**/
border: 5px solid #f7cc88; /**枠の色**/
border-radius: 3px;
box-shadow: 0 0 8px #333, 0 0 2px #555 inset; /**影の色**/
}

.board_box::before,
.box13::after {
position: absolute;
content: ”;
width: 25px;
bottom: 3px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666; /** 影の色 **/
}

.board_box::before {
right: 55px;
border: solid 3px #8c8c8c; /**飾ペン黒 **/
}

.board_box::after {
right: 20px;
border: solid 3px #ffa3ce; /**飾ペンピンク **/
transform: rotate(8deg); /**飾ペン角度 **/
}

.board_box-title {
position: absolute;
padding: .1em .5em;
left: 1em;
top: .5em;
font-weight: bold;
font-size: 1.1em;
color: #ff9e9e; /**タイトル文字色**/
background: #fffff9; /**ボックス背景色**/
box-shadow: 1px 1px 3px #a0a0a0; /**影の色**/
}

/**黄色ドット囲み**/

.dot_box6 {
padding: 1em 1.5em;
margin: 2em 0;
background-color:#ffffe0;/**背景色**/
border: dotted 6px #e3e3b8;/**線**/
color:#000000;/**文字色**/
}
.dot_box6 p {
margin: 0;
padding: 0;
}

/**[点線]青**/

.dot_box7 {
position: relative;
padding: 0.25em 1em;
margin: 2em 0;
top: 0;
background: #edf6fa;
}
.dot_box7:before, .box20:after{
position: absolute;
top: 0;
content:”;
width: 10px;
height: 100%;
display: inline-block;
box-sizing: border-box;
}
.dot_box7:before{
border-left: dotted 4px #15adc1;
border-top: dotted 4px #15adc1;
border-bottom: dotted 4px #15adc1;
left: 0;
}
.dot_box7:after{
border-top: dotted 4px #15adc1;
border-right: dotted 4px #15adc1;
border-bottom: dotted 4px #15adc1;
right: 0;
}
.dot_box7 p {
margin: 0;
padding: 0;
}

/**点（ドット）**/
.dot_box8 {
margin: 2em auto;
padding:2em;/**内側余白**/
border:dotted 3px #e2c2b3;/**線の種類 太さ 色**/
background: #c49d9d;/**背景色**/
}