CSS – border Option

Require Option

border-width, border-color, border-style

필수 선언 옵션

위 3개의 옵션은 선언 시 반드시 필요합니다.
아래와 같이 개별 선언하는 방법이 있고 border 옵션을 통해 일괄 선언하는 방법이 있습니다.

• 선언 코드

div {
   border-color: red;
   border-width: 10px;
   border-style: solid;
}

Option (border)

• 선언 코드
  • Syntax – <line-width> || <line-style> || <color>

div {
   border: 1px solid #bcbcbc;
}

• border-top

div {
   border-top: 1px solid #bcbcbc;
}

• border-bottom

div {
   border-bottom: 1px solid #bcbcbc;
}

• border-left

div {
   border-left: 1px solid #bcbcbc;
}

• border-right

div {
   border-right: 1px solid #bcbcbc;
}

Option (border-style)

• 선언 코드

div {
   border-style: style-name;
}

• solid – 선

• dashed – 긴 점선

• dotted – 점선

• double – 두 줄 표시

• groove
  • top, left 라인은 바깥에 음영을 주고 bottom, right 라인은 안쪽에 음영을 줘서 선에 움푹 패인 효과를 주게 됩니다

• ridge
  • top, left 라인은 안쪽에 음영을 주고 bottom, right 라인은 바깥에 음영을 줘서 선에 볼록한 효과를 주게 됩니다

• inset – 안쪽 선 음영 (top, left)

• outset – 바깥 선 음영 (bottom, right)

• none
  • 선이 존재하지 않음

Option (border-radius)

• 선언 코드

div {
   border-radius: 10px;
}