[비전공자를 위한 HTML/CSS] (25) CSS 속성- border

border : 요소의 테두리에 관련된 속성을 지정할 때 사용.

 

• border-width
• border-style
• border-color

 

 

border-width     
  : 선의 굵기를 지정하는 속성.  기본값: medium 

  border-top-width, border-bottom-width, border-right-width, border-left-width 이용하여 상하좌우 굵기다르게 표현 가능.

/*축약*/
border-width: [top] [right] [bottom] [left];

<속성값>

• 키워드 : thin | medium | thick
• 단위 : px, em, rem, ... (%, 정수 단위 사용불가)

 

 

 

border-style
  : 선의 모양을 지정하는 속성. 기본값: none

  border-top-style, border-bottom-style, border-right-style, border-left-style 이용하여 상하좌우 선 모양 다르게 표현 가능.

/*축약*/
border-style: [top] [right] [bottom] [left];

<속성값>

• none : border를 표시하지 않음.
• solid : border를 실선모양으로 나타냄.
• double : border를 이중 실선으로 나타냄.
• dotted : border를 점선으로 나타냄.
• dashed, groov, ridge, inset, outset ...
• CSS border-style property (w3schools.com)

CSS border-style property

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

 

 

border-color
  : 색상을 지정하는 속성.  기본값: currentColor
 border-top-color, border-bottom-color, border-right-color, border-left-color 이용하여 상하좌우 색상 다르게 표현 가능.

/*축약*/
border-color: [top] [right] [bottom] [left];

색상은 일반적인 CSS 색상 값과 사용 방식이 같다.

<color> - CSS: Cascading Style Sheets | MDN (mozilla.org)

- CSS: Cascading Style Sheets | MDN

 

 

border 축약

  border-top, border-bottom, border-right, border-left 를 통해 상하좌우 다르게 표현 가능.

border: [-width] [-style] [-color];

 

   보더 단축속성

border: 3px solid blue;

단축 속성

   왼쪽 보더

border-left: 5px solid red;

왼쪽보더

   보더 두께

border-width: 6px;
border-style: solid;

보더 두께

   보더 상하, 좌우

border-width: 3px 6px;
border-color: red green;
border-style: solid double;

보더 상하, 좌우

 

   보더 상, 좌우, 하

border-width: 2px 6px 3px;
border-color: red green blue;
border-style: solid;

보더 상, 좌우, 하

 

   보더 상, 우, 하, 좌

border-width: 1px 6px 3px 2px;
border-color: red green blue black;
border-style: solid double dashed dotted;

보더 상, 우, 하, 좌