CSS - border 스타일링

boder 속성 스타일링하기

1. border 속성은 3개의 속성이 합쳐진 것이다.

border	border-width(선의 굵기)
	border-style(선의 스타일)
	border-color(선의 색깔)

---

2. border의 위치를 top, right, bottom, left 각각 지정할 수 있다.

border: 5px -> 4면 모두 5px
border: 5px 10px -> top, bottom은 5px, right,left는 10px을 의미
border: 5px 10px 7px -> top은 5px, right,left는 10px, bottom 7px을 의미 
border: 5px 10px 7px 8px

---

3. 테두리 모양 스타일링 하기

border-style 속성으로 테두리 선의 모양을 설정할 수 있다.

 

예시 코드

<style>
      /* border : border-width, border-style, border-color 이 3개의 속성이 합쳐진 것 */
      /* border-top, border-right, border-bottom, border-left */

      /* border: 5px -> 4면 모두 5px */
      /* border: 5px 10px -> top, bottom은 5px, right,left는 10px을 의미 */
      /* border: 5px 10px 7px -> top은 5px, right,left는 10px, bottom 7px을 의미 */
      /* border: 5px 10px 7px 8px  */
      div {
        /* border: 3px solid red; */
        border-width: 3px;
        /* border-style: solid; */
        border-color: red;
        width: 50px;
        height: 50px;
        margin: 10px;
      }

      /* 테두리가 직사각형 여러개로 그려짐 */
      .dashed {
        border-style: dashed;
      }
      /* 테두리가 둥근 점 여러개로 그려짐 */
      .dotted {
        border-style: dotted;
      }

      /* 실선 */
      .solid {
        border-style: solid;
      }

      /* 이중 선 */
      .double {
        border-style: double;
      }

      /* 실선인데 테두리가 파인것처럼 보임 */
      .groove {
        border-style: groove;
      }

      /* 실선인데 테두리가 튀어나온것처럼 보임 */
      .ridge {
        border-style: ridge;
      }

      /* 실선인데 요소가 파인것처럼 보임 */
      .inset {
        border-style: inset;
      }

      /* 실선인데 요소가 튀어나온 것처럼 보임 */
      .outset {
        border-style: outset;
      }

      /* 두께 설정 */

      /* 테두리 얇게 */
      .thin {
        border-width: thin;
      }

      /* 테두리 크기 미디움 */
      .medium {
        border-width: medium;
      }

      /* 테두리 굵게 */
      .thick {
        border-width: thick;
      }

      /* 테두리 모양 설정하기 */

      /* border-radius : 4개의 모서리에 대해서 모양을 지정할 수 있음 */
      .radius {
        border-radius: 5px;
      }