囲み枠

CSSのファイルはstyle030.cssです。

枠を付けます。

<p class="box0">
  線で囲みます。
.box0 {border: solid 1px #000;}/*囲み枠*/
</p>

枠に内外に空間を開けます。
黒い線で囲みます。
.box1 {
padding: 0.5em 1em;/*(領域内のスペース[上下][左右])*/
margin: 2em 0;/*(周囲の空間[上下][左右])*/
border: solid 3px #000000;}/*囲み枠*/

青い丸四角で囲みます。
.box2 {
font-weight: bold;/*文字の太さ*/
color: #6091d3;/*文字色*/
background: #8FF;/*背景色*/
border: solid 3px #7090d0;/*[上][下][左][右]囲み枠*/
border-radius: 10px;/*[上][下][左][右]角の丸み*/
}

線を変えます。

四角い背景で囲みます。.box3 {background: #8FF;}/*背景色*/

二重線で囲みます。.box4 {border: double 5px #000;}/*二重線*/

点線で囲みます。.box5 {border: dashed 2px #000;}/*点線*/}

枠に色を付けます。

枠に色を付けます。1色指定すると[上下左右]の色になります。
.box61{border: solid 2px;
  border-color:blueviolet/*[上下左右] */}

2色指定すると[上下]と[左右]の色になります。
.box62{border: solid;
border-color:blueviolet red/*[上下][左右] */}

3色指定すると[上]と[左右]･[下]の色になります。
.box63{border: solid;
border-color:blueviolet red green/*[上][左右][下] */}

4色指定すると[上]と[右]･[下][左]の色になります。
.box64{border: solid; border-color:blueviolet red green yellow/*[上][右][下][左] */}

上下左右独自に指定します。

上下左右を別線で囲みます。
.box6 {
border-top: dashed 2px #000;
border-left: solid 10px #0ff;
border-right:double 5px #f0f;
border-bottom: solid 25px #ff0;
}/*上下左右線*/

影を付けます。

くっきりした影を付けます。
.box7 {border: solid 1px #000;box-shadow:
5px 5px rgba(0,0,0,0.5);}/*影*/

影を付けます。
.box8 {border: solid 1px #000;box-shadow:
5px 5px 5px rgba(0,0,0,0.5);}/*影*/

影を付けます。
.box9 {border: solid 1px #000;box-shadow:
5px 5px 5px 5px rgba(0,0,0,0.5);}/*影*/

左上から内側に影を付けます。
.boxa border: solid 1px #000;{box-shadow:
5px 5px 5px 5px rgba(0,0,0,0.5) inset;}/*影*/

丸みを付けます。

.boxb {border: solid 1px #000;border-radius: 10px 20px 30px 40px;}
角の丸み
[上下左右] 10px

.boxb {border: solid 1px #000;border-radius: 10px;}
角の丸み
padding: 1rem 50px;/*(領域内のスペース[上下][左右])*/
[上] 10px
[下] 20px
[左] 30px
[右] 40px