코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS Border</title> <style> .dotted {border-style: dotted;} .dashed {border-style: dashed;} .solid {border-style: solid;} .double {border-style: double;} .groove {border-style: groove;} .ridge {border-style: ridge;} .inset {border-style: inset;} .outset {border-style: outset;} .none {border-style: none;} .hidden {border-style: hidden;} .mix {border-style: solid dashed dotted double;} </style> </head> <body> <h1>border-style 속성을 이용한 테두리의 모양 변경</h1> <p class="dotted">border-style 속성값을 dotted로 한 단락입니다.</p> <p class="dashed">border-style 속성값을 dashed로 한 단락입니다.</p> <p class="solid">border-style 속성값을 solid로 한 단락입니다.</p> <p class="double">border-style 속성값을 double로 한 단락입니다.</p> <p class="groove">border-style 속성값을 groove로 한 단락입니다.</p> <p class="ridge">border-style 속성값을 ridge로 한 단락입니다.</p> <p class="inset">border-style 속성값을 inset으로 한 단락입니다.</p> <p class="outset">border-style 속성값을 outset으로 한 단락입니다.</p> <p class="none">border-style 속성값을 none으로 한 단락입니다.</p> <p class="hidden">border-style 속성값을 hidden으로 한 단락입니다.</p> <p class="mix">border마다 각각의 border-style 속성값을 적용한 단락입니다.</p> </body> </html>
