border 속성 1 - 이해

1. border 속성은 박스모델에 테두리를 부여하는 속성이다. 

 

속성	속성값	설명
border	1px solid #eee	short hand
border-width	1px	보더의 두께
border-style	solid | dotted | dashed | none | groove | ridge | inset | outset	보더의 모양
border-color	css의 색상표현기법 모두 가능	보더 색상
border-top	1px solid red	상단 보더 속성
border-right	1px solid red	우측 보더 속성
border-bottom	1px solid red	하단 보더 속성
border-left	1px solid red	좌측 보더 속성
border-radius	10px 10px 10px 10px 10px	네개의 꼭지점 둥글기 꼭지점의 둥근 정도를 px, % 등의 단위로 표현할 수 있다. 좌측 상단 꼭지점부터 시계방향 순서이다.
border-top-left-radius	10px	상단좌측 꼭지점
border-top-right-radius	10px	상단우측
border-bottom-left-radius	10px	하단좌측
border-bottom-right-radius	10px	하단우측
border-radius	10px/80px	가로방향/세로방향 반지름
border-image	url(dot.png) 20 round	20은 이미지 수치, round | repeat | stretch 모서리 처리 방법

 

---

 

---

/*CSS영역*/
div{
		width:300px; height: 300px;
		background: orange;
		margin:50px;
		display:inline-block;
	}
	.box1{
		border-radius:35px/80px;
	}
	.box2{
		background: none;
		border:20px solid transparent;
		border-image:url('img/border.png') 27 round;
	}
	.box3{
		border-radius:50px;
	}
	.box4{
		border-radius:150px;
		border-top: 20px solid #000;
	}
	.box5{
		border-radius:300px;
		border-top: 20px solid #000;
	}
	.box6{
		border-radius:80px 0 80px 0;
	}
	.box7{
		border-radius: 300px 0 0 0;
		border-top: 100px solid #000;
	}
	.box8{
		border-radius:25%;
	}
	.box9{
		border-radius:300px 0 300px 0;
		border-left:100px solid #000;
		border-bottom:100px solid #000;
	}
	.box10{
		border-radius:300px 300px 0 0;
		border-left:100px solid #000;
		border-right:100px solid #000;
	}
	.box11{
		border-radius:0 0 0 100%;
		border-bottom:100px solid #000;
	}

<!--HTML영역-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>