08_테두리 관련 태그

테두리 스타일

 border-style : none / dotted / dashed / solid / 
 double / groove / ridge / inset / outset;

테두리 두께

border[-위치]-width : 테두리 두께;

테두리 색상

border[-위치]-color : 테두리 색상;

테두리 스타일, 두께, 색상

 border[-위치] : 두께 스타일 색상; 
 => 색상 생략가능(생략시 글자색으로 통일)

테두리 모서리 둥글게

 border[-위아래][-좌우]-radius : 숫자값; 
 => 위치 생략 시, 사방이 둥글게됨.

테두리 그림자

box-shadow : 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상;

<style>
div{
 	 width : 100px;
  	height : 100px;
  	border-width : 3px;
  	margin : 15px;
}
#test1{
  		border-style: dotted;
  		border-width: 10px;
  		border-color: green;
  		border-top-style: double;
  		border-right-color : red;
  		border-bottom-width: 1px;
}

#test2{
  		border : 10px dotted green;
  		border-left-style: solid;
  		border-top : 5px dashed red;
}

#test3{
        /*
  		border-top-style : dashed;
  		border-right-style : double;
  		border-bottom-style : solid;
  		border-left-style : dotted;
  		*/
  		border-style : dashed double solid dotted;
}

#test4{
  		border-width : 10px;
  		border-style : groove; /* 안으로 들어간 액자 느낌 */
  		border-top-left-radius : 50px;
}

#test5{
		border-width : 10px;
  		border-style : ridge; /* 튀어나온 액자 느낌 */
  		border-bottom-right-radius : 80px;
}

#test6{
  		border-width: 10px;
  		border-style : inset; /* 면적 자체가 안으로 움푹 패인 느낌 */
  		border-top-left-radius : 60px;
  		border-bottom-right-radius : 60px;
  		background-color: yellow;
}

#test7{
  		border-width : 10px;
  		border-style : outset; /* 면적 자체가 밖으로 튀어나온 느낌 */
}

#test8{
  		border-style : solid;
  		border-radius : 50px;
}

#test9{
  		box-shadow : 5px 5px 10px 5px gray;
}

#test10{
  		border : 2px dashed pink;
}

#btn{
  		border : 2px dashed pink;
  		padding : 10px 20px;
  		border-radius : 10px
}

#btn:hover{
  			background-color: gray;
            cursor: pointer;
}  
</style>