CSS3 / border 속성

1. border 속성 (3개)

- border-width 속성

- border-style 속성

- border-color 속성

 

2. border-radius 속성

 

---

<style>

   .box {

      width: 100px;

      height: 100px;

      margin: 50px;

      border-width: 10px; /*테두리의 너비 나타냄. 선의 두께*/

      border-style: solid; /*테두리에 어떤 스타일을 적용할 것인지 나타냄.*/

      border-color: red; /*테두리에 어떤 색을 지정할 것인가*/

/* 위에 3개를 아래처럼 boder 한 줄에 한꺼번에 다 쓸 수 있음*/

      border: 10px(너비) solid(스타일) red(컬러); /*margin과 다르게 각각 한개의 속성값만 입력가능. margin : 10px 10px 10px 10px*/

      border-color: red black blue yellow; /*4개 입력하면 시계방향으로 적용. but 보통 하나만 입력함.*/

 

      border-radius: 15px 80px 50px 10px ; /*여러개 입력하면서 각 보더 모양을 바꿀 수 있음. but 보통 하나만 입력.*/

/*뒤쪽에 크기 단위를 지정. 테두리가 둥글어지게 됨.  %로도 입력가능하고 50%넘어가는 순간부터 완전한 O(원)이 됨.

프로필 사진 등을 출력할 때 굉장히 많이 볼 수 있는 형태.*/

/*border 속성과 border-radius 속성은 완전 별개. 따라서 이 둘을 꼭 함께 지정하지 않아도 된다.

border 대신 background-color를 써서 안이 꽉찬 도형을 만들 수도 있음.*/

      background-color: salmon; }

</style>

<div class="box">Hello world</div>