20190502/cssBorder1.html

    
<!doctype html> <!-- cssBorder1.html -->
<html>
  <head>
    <meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>CSS border 실습</title>
    <style>
			.pbsolid {border:5px solid; background:beige;}
      .pbdashed {border:5px dashed; background:beige;}
      .pbdotted {border:5px dotted; background:beige;}
      .pbdouble {border:5px double; background:beige;}
      .pbhidden {border:5px hidden; background:beige;}
      .pbnone {border:5px none; background:beige;}
      .pbinset {border:5px inset; background:beige;}
      .pboutset {border:5px outset; background:beige;}
      .pbridge {border:5px ridge; background:beige;}
      .pbgroove {border:5px groove; background:beige;}
      .pbrad {border:1px solid; border-radius:10px; width:10%;}
    </style>
  </head>
  <body>
		<section>
		<h3>애국가</h3>
			<p class="pbsolid">(solid)동해물과 백두산이 마르고 닳도록</p>
			<p class="pbdashed">(dashed)하느님이 보우하사 우리나라 만세</p>
			<p class="pbdotted">(dotted)무궁화 삼천리 화려강산</p>
			<p class="pbdouble">(double)대한사람 대한으로 길이 보전하세</p>
			<p class="pbhidden">(hidden)남산 위에 저 소나무 철갑을 두른 듯</p>
			<p class="pbnone">(none)바람서리 불변함은 우리 기상일세</p>
			<p class="pbinset">(inset)무궁화 삼천리 화려강산</p>
			<p class="pboutset">(outset)대한사람 대한으로 길이 보전하세</p>
			<p class="pbridge">(ridge)가을하늘 공활한데 높고 구름 없이</p>
			<p class="pbgroove">(groove)밝은 달은 우리가슴 일편단심일세</p>
			<p class="pbrad">(radius)이 기상과 이 맘으로 충성을 다하여</p>
		</section>
  </body>
</html>