• CSS Borders
• CSS Border Width
• CSS Border Color
• CSS Bordr Sides
• CSS Shorthand Border Property
• CSS Rounded Borders

CSS Border 속성은 요소의 보더 스타일, 너비, 컬러를 지정합니다.

border-style속성은 표시되는 보더의 종류를 지정합니다.

• dotted - 점선 테두리를 정의합니다.
• dashed - 파선 테두리를 정의합니다.
• solid - 실선 테두리를 정의합니다.
• double - 이중 테두리를 정의합니다.
• groove - 그루브 테두리를 정의합니다.
• ridge - 리지 테두리를 정의합니다.
• inset - 인셋 테두리를 정의합니다.
• outset - 아웃셋 테두리를 정의합니다.
• none - 테두리가 나타나지 않습니다.
• hidden - 숨겨진 테두리를 정의합니다.

border-style속성은 1 ~ 4개 (top border, right border, bottom border, left border, 상우하좌)의 속성을 나타낼 수 있습니다.

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;}

• 다른 CSS 테두리 속성은 border-style속성이 설정되어 있지 않으면 효과가 없습니다.
  

border-width속성은 4개CSS Borders

• author : 오션
• email : shlim@repia.com
• lastupdate : 2021-03-05

</WRAP>

• CSS Borders
• CSS Border Width
• CSS Border Color
• CSS Bordr Sides
• CSS Shorthand Border Property
• CSS Rounded Borders

CSS Border 속성은 요소의 테두리 스타일, 너비, 컬러를 지정합니다.

border-style속성은 표시되는 테두리의 종류를 지정합니다.

• dotted - 점선 테두리를 정의합니다.
• dashed - 파선 테두리를 정의합니다.
• solid - 실선 테두리를 정의합니다.
• double - 이중 테두리를 정의합니다.
• groove - 그루브 테두리를 정의합니다.
• ridge - 리지 테두리를 정의합니다.
• inset - 인셋 테두리를 정의합니다.
• outset - 아웃셋 테두리를 정의합니다.
• none - 테두리가 나타나지 않습니다.
• hidden - 숨겨진 테두리를 정의합니다.

border-style속성은 1 ~ 4개 (top border, right border, bottom border, left border, 상우하좌)의 속성을 나타낼 수 있습니다.

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;}

• 다른 CSS 테두리 속성은 border-style속성이 설정되어 있지 않으면 효과가 없습니다.
  

border-width속성은 4개 테두리의 너비를 지정합니다.
너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나, 미리 정해진 세 가지 값 (thin, medium, thick) 중 하나를 사용하여 설정할 수 있습니다.

p.one {
  border-style: solid;
  border-width: 5px;
}
 
p.two {
  border-style: solid;
  border-width: medium;
}
 
p.three {
  border-style: dotted;
  border-width: 2px;
}
 
p.four {
  border-style: dotted;
  border-width: thick;
}

border-width속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리 / 상우하좌)을 가질 수 있습니다.

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 상하 - 5px, 좌우 - 20px */
}
 
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 상하 - 20px, 좌우 - 5px */
}
 
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 상 - 25px, 우 - 10px, 하 - 4px, 좌 - 35px */
}

border-color 속성은 4개의 테두리 컬러 지정에 사용됩니다.
컬러는 하기와 같이 지정할 수 있습니다.

• 컬러 이름 - “red”와 같은 컬러 이름을 지정합니다.
• HEX - “ff0000”과 같은 HEX 값을 지정합니다.
• RGB - “rgb(255, 0, 0)“과 같이 RGB 값을 지정합니다.
• HSL - “hsl(0, 100%, 50%)“처럼 HSL 값을 지정합니다.
• transparent - 투명

*border-color를 설정하지 않는 경우, 요소의 컬러를 상속받습니다.
====예제==== <code css> p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; } </code>
======Specific Side Colors====== border-color속성은 1 ~ 4개의 값 (위쪽 테두리, 우측 테두리, 아래쪽 테두리, 좌측 테두리 / 상우하좌)을 가질 수 있습니다.

====예제==== <code css> p.one { border-style: solid; border-color: red green blue yellow; } </code>

======HEX Values====== 테두리 컬러는 16진수 값(hexadecimal value, HEX)을 사용하여 지정할 수 있습니다.

====예제==== <code css> p.one { border-style: solid; border-color: #ff0000; } </code> ======RGB Values====== 테두리 컬러는 RGB 값을 사용하여 지정할 수 있습니다.

====예제==== <code css> p.one { border-style: solid; border-color: rgb(255, 0, 0); } </code> ======HSL Values====== 테두리 컬러는 HSL 값을 사용하여 지정할 수 있습니다.

====예제==== <code css> p.one { border-style: solid; border-color: hsl(0, 100%, 50%); } </code> ======CSS Border Sides====== =====CSS Border - Individual Sides===== CSS에서, 각각의 4개 테두리의 속성을 지정할 수 있습니다.

====예제==== <code css> p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } </code>
상시 코드를 아래와 같이 작성할 수 있습니다. <code css> p { border-style: dotted solid; } </code>
작동 원리는 아래와 같습니다.
border-style속성이 4개의 값을 가지는 경우,
* border-style:dotted solid double dashed;**