枠の内側に入れ中央寄せのタイトルを入れたCSS囲み枠デザイン
before疑似要素でattr関数を使用し囲み枠にタイトルを入れてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root {--pic-image-data:none;}</style><style id="out-style">.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.pic-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
padding: 0 6rem;
box-sizing: border-box;
background-color: #fefefe;
}
.box {
position: relative;
padding: 3rem 1rem 1rem;
border-box: box-sizing;
background-color: #efefef;
}
.box::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem;
border-radius: 10px;
background-color: #5fc8bc;
color: white;
content: attr(data-title);
}
.box p {
color: #333;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザインデザイン。タイトルを入れた囲み枠デザインデザイン。タイトルを入れた囲み枠デザインデザイン。</p>
</div>
</div>
</body></html>
枠の内側にタイトルを入れたCSS囲み枠デザイン
before疑似要素でattr関数を使用し囲み枠にタイトルを入れてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root {--pic-image-data:none;}</style><style id="out-style">.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.pic-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
padding: 0 6rem;
box-sizing: border-box;
background-color: #fefefe;
}
.box {
padding: 0 1rem 1rem;
border: 2px solid #6be5ec;
border-box: box-sizing;
background-color: #efefef;
}
.box::before {
display: inline-block;
margin: 0 0 0.5rem -1rem;
padding: 0.5rem;
background-color: #6be5ec;
color: white;
content: attr(data-title);
}
.box p {
color: #333;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>
</div>
</body></html>
左上にタイトルを入れたCSS囲み枠デザイン
before疑似要素でattr関数を使用し囲み枠にタイトルを入れてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root {--pic-image-data:none;}</style><style id="out-style">.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.pic-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
padding: 0 6rem;
box-sizing: border-box;
background-color: #fefefe;
}
.box {
position: relative;
padding: 1rem;
border: 2px solid #e056db;
border-box: box-sizing;
background-color: #fce0fb;
}
.box::before {
position: absolute;
top: -2rem;
left: -2px;
padding: 0.5rem;
background-color: #e056db;
color: white;
content: attr(data-title);
}
.box p {
color: #333;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" contenteditable="true" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>
</div>
</body></html>
左上と右下を角丸にしたCSS囲み枠デザイン
「border-top-left-radius」「border-bottom-right-radius」で左上と右下を角丸にしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
z-index: 0;
}
.box {
padding: 1.5rem;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
border: 5px solid #fce6ba;
background-color: #b8d8e0;
outline: 2px solid #333;
outline-offset: -1.5rem;
}
.box p {
color: #333;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>左上と右下を角丸にした囲み枠デザインです。左上と右下を角丸にした囲み枠デザインです。左上と右下を角丸にした囲み枠デザインです。</p>
</div>
</div>
</body></html>
上側だけ角丸にしたCSS囲み枠デザイン
「border-top-left-radius」「border-top-right-radius」で左上と右上を角丸にしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
z-index: 0;
}
.box {
padding: 1rem;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 2px dashed #333;
background-color: #F2A678;
box-shadow: 0 0 0 10px #efcfbd;
}
.box p {
color: #333;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container pic-background">
<div class="box">
<p>左上、右上を角丸にした囲み枠デザイン。左上、右上を角丸にした囲み枠デザイン。左上、右上を角丸にした囲み枠デザイン。</p>
</div>
</div>
</body></html>
一箇所だけ角丸にしたCSS囲み枠デザイン
「border-top-left-radius」で左上だけ角丸にしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
z-index: 0;
}
.box {
position: relative;
padding: 1rem;
border-top-left-radius: 20px;
background-color: #3f541a;
outline: 2px solid #3f541a;
outline-offset: 5px
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>左上だけ角丸にした囲み枠デザイン。左上だけ角丸にした囲み枠デザイン。左上だけ角丸にした囲み枠デザイン。</p>
</div>
</div>
</body></html>
境界線をグラデーションにしたCSS囲み枠デザイン
「linear-gradient」で境界線をグラデーションにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
--bg-gradient: linear-gradient(135deg, #A0FE65 10%, #FA016D 100%);
padding: 1rem;
box-shadow: 0 0 0 10px #222;
border-radius: 5px;
background-color: #222;
background-image:
var(--bg-gradient),
var(--bg-gradient),
var(--bg-gradient),
var(--bg-gradient);
background-repeat: no-repeat;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-position: top, right, bottom, left;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>境界線をグラデーションにした囲み枠。境界線をグラデーションにした囲み枠。境界線をグラデーションにした囲み枠。</p>
</div>
</div>
</body></html>
境界線の色を変えたCSS囲み枠デザイン
「border-color」で色を変えて「box-shadow」で背景を広げてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
box-shadow: 0 0 0 10px #202430;
border-style: solid solid;
border-width: 5px;
border-color: #CDE7F3 #f2cdd7 #cdf2d3 #f2eecd;
background-color: #202430;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>境界線の色を変えた囲み枠です。境界線の色を変えた囲み枠です。境界線の色を変えた囲み枠です。</p>
</div>
</div>
</body></html>
左右を点線にしたCSS囲み枠デザイン
「border-style」で左右を点線にしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
box-shadow: 0 0 0 10px #2B2936;
border-style: none dotted;
border-width: 5px;
border-color: white;
background-color: #2B2936;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>左右を点線にした囲み枠です。左右を点線にした囲み枠です。左右を点線にした囲み枠です。左右を点線にした囲み枠です。</p>
</div>
</div>
</body></html>
上下を実線、左右を二重線にしたCSS囲み枠デザイン
「border-style」で上下を実線、左右を二重線にしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border-style: solid double;
border-width: 10px;
border-color: #ccc;
background-color: #ec694d;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>上下を実線、左右を二重線にした囲み枠です。上下を実線、左右を二重線にした囲み枠です。上下を実線、左右を二重線にした囲み枠です。</p>
</div>
</div>
</body></html>
上下を実線、左右を破線にしたCSS囲み枠デザイン
「border-style」で上下を実線、左右を破線にしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
box-shadow:0 0 0 10px #ca9f7b;
border-style: solid dashed;
border-width: 5px;
border-color: #333;
background-color: #ca9f7b;
}
.box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>上下を実線、左右を破線にした囲み枠です。上下を実線、左右を破線にした囲み枠です。上下を実線、左右を破線にした囲み枠です。</p>
</div>
</div>
</body></html>
境界線の色を変えたCSS囲み枠デザイン
「border-color」で色を変えて「box-shadow」で背景を広げてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
box-shadow:0 0 0 10px #202430;
border-radius:5px;
border-style: solid solid ;
border-width:5px;
border-color:#92c65b #92c65b #5bc6a6 #5bc6a6;
background-color: #202430;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>境界線の色を変えた囲み枠です。境界線の色を変えた囲み枠です。境界線の色を変えた囲み枠です。</p>
</div>
</div>
</body></html>
四隅にカッコを付けたCSS囲み枠デザイン
「linear-gradient」と「background-size」を調整して括弧を作ってます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #fefefe;
box-sizing: border-box;
}
.box {
--x-gradient: linear-gradient(90deg, #6be5ec 0 25px, transparent 0 calc(100% - 25px), #6be5ec calc(100% - 25px));
--y-gradient: linear-gradient(#6be5ec 0 25px, transparent 0 calc(100% - 25px), #6be5ec calc(100% - 25px));
margin: 0.5rem;
padding: 1rem;
outline: 2px solid;
outline-offset: -5px;
background-image:
var(--x-gradient),
var(--y-gradient),
var(--x-gradient),
var(--y-gradient);
background-repeat: no-repeat;
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
background-position: top, right, bottom, left;
}
.box p {
line-height: 1.5;
color: #222;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>4隅に括弧を入れた囲み枠です。4隅に括弧を入れた囲み枠です。4隅に括弧を入れた囲み枠です。4隅に括弧を入れた囲み枠です。</p>
</div>
</div>
</body></html>
四隅にカッコを付けたCSS囲み枠デザイン
「linear-gradient」と「background-size」を調整して括弧を作ってます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #fefefe;
box-sizing: border-box;
}
.box {
--x-gradient: linear-gradient(90deg, #333 0 10px, transparent 0 calc(100% - 10px), #333 calc(100% - 10px));
--y-gradient: linear-gradient(#333 0 10px, transparent 0 calc(100% - 10px), #333 calc(100% - 10px));
margin: 0.5rem;
padding: 1rem;
background-image:
var(--x-gradient),
var(--y-gradient),
var(--x-gradient),
var(--y-gradient);
background-repeat: no-repeat;
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
background-position: top, right, bottom, left;
}
.box p {
line-height: 1.5;
color: #222;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container pic-background">
<div class="box">
<p>4隅に括弧を入れた囲み枠です。4隅に括弧を入れた囲み枠です。4隅に括弧を入れた囲み枠です。4隅に括弧を入れた囲み枠です。</p>
</div>
</div>
</body></html>
角の線を交差させたCSS囲み枠デザイン
「linear-gradient」で交差線を作ってます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #fefefe;
box-sizing: border-box;
}
.box {
--bg-gradient: linear-gradient(#333 0 100%);
margin: 0.5rem;
padding: 1.5rem;
background-image:
var(--bg-gradient),
var(--bg-gradient),
var(--bg-gradient),
var(--bg-gradient);
background-repeat: no-repeat;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-position: left top 5px, right 5px top, left bottom 5px, left 5px top;
}
.box p {
line-height: 1.5;
color: #222;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background">
<div class="box">
<p>角の線を交差させた囲み枠です。角の線を交差させた囲み枠です。角の線を交差させた囲み枠です。</p>
</div>
</div>
</body></html>
太い実線を入れて角丸にしたCSS囲み枠デザイン
「border: 5px solid #E59430;」で太い実線を入れてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 0 0 10px #262F37;
border: 5px solid #E59430;
background-color: #262F37;
}
.box p {
line-height: 1.5;
color:white;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background"><div class="box"><p>太い実線入れて角丸にしたシンプルな囲み枠です。太い実線入れて角丸にしたシンプルな囲み枠です。</p></div></div></body></html>
上に境界線を入れたシンプルなCSS囲み枠デザイン
「border-top」で実線（solid）を入れてます。
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border-top: 10px solid #555;
background-color: #F5D0DD;
}
.box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container pic-background">
<div class="box">
<p>上に境界線を入れたシンプルな囲み枠です。上に境界線を入れたシンプルな囲み枠です。上に境界線を入れたシンプルな囲み枠です。</p>
</div>
</div>
</body></html>
両端に破線を入れたシンプルなCSS囲み枠デザイン
「border-left」「border-right」で破線（dashed）を入れ、box-shadowで背景を広げてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
box-shadow: 0 0 0 10px #F6F3C0;
border-left: 5px dashed;
border-right: 5px dashed;
background-color: #F6F3C0;
}
.box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background"><div class="box"><p>両端に破線を入れた囲み枠です。両端に破線を入れた囲み枠です。両端に破線を入れた囲み枠です。</p></div></div></body></html>
破線を入れて角丸にしたシンプルなCSS囲み枠デザイン
「border: 2px dashed white;」で破線を入れ、box-shadowで背景を広げてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #fefefe;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 0 0 10px #CDE7F3;
border: 2px dashed white;
background-color: #CDE7F3;
}
.box p {
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background"><div class="box"><p>破線を入れて角丸にした囲み枠です。破線を入れて角丸にした囲み枠です。破線を入れて角丸にした囲み枠です。</p></div></div></body></html>
太い破線を入れたシンプルなCSS囲み枠デザイン
「border: 5px dashed #45AEEF;」で太い破線を入れました。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border: 5px dashed #45AEEF;
background-color: #202430;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background"><div class="box"><p>破線を入れた囲み枠です。破線を入れた囲み枠です。破線を入れた囲み枠です。破線を入れた囲み枠です。</p></div></div></body></html>
背景と境界線を入れたシンプルなCSS囲み枠デザイン
「background-color」で背景「border」で境界線を入れたシンプルな囲み枠
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #f1f1f1;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border: 3px solid #418F91;
background-color: #0B1F27;
}
.box p {
color: white;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 338px; transform-origin: left top; transform: scale(1);" contenteditable="true"><div class="pic-container pic-background"><div class="box"><p>背景と境界線を入れたシンプルな囲み枠です。背景と境界線を入れたシンプルな囲み枠です。背景と境界線を入れたシンプルな囲み枠です。</p></div></div></body></html>
実線で囲んだシンプルなCSS囲み枠デザイン
「border」で囲んだシンプルな囲み枠
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 338px;
padding: 6rem;
background-color: #fff;
box-sizing: border-box;
}
.box {
margin: 0.5rem;
padding: 1rem;
border: 2px solid;
color: #17293F;
}
.box p {
font-weight: bold;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container pic-background">
<div class="box">
<p>境界線を入れたシンプルな囲み枠です。境界線を入れたシンプルな囲み枠です。境界線を入れたシンプルな囲み枠です。</p>
</div>
</div>
</body></html>