border-style

border-radius 테두리 둥굴게

CSS 테두리 스타일

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

다음 값이 허용됩니다.

• dotted- 점선 테두리를 정의합니다.
• dashed- 점선 테두리를 정의합니다.
• solid- 단색 테두리를 정의합니다.
• double- 이중 테두리 정의
• groove- 3D 홈 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• ridge- 3D 융기된 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• inset- 3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• outset- 3D 아웃셋 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• none- 경계를 정의하지 않음
• hidden- 숨겨진 테두리를 정의합니다.

속성 은 border-style1~4개의 값을 가질 수 있습니다(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리에 대해).

예시

다양한 테두리 스타일 시연:

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

결과:

https://www.w3schools.com/css/css_border.asp

CSS Borders