Home
CSS
박스 모델

테두리 모양을 정하는 방법 - border-style

border-style 속성은 실선이나 점선, 이중선 등 테두리의 모양(형태)을 지정합니다.
1 min read

테두리 스타일을 지정하는 border-style 속성은 기본 값이 none 이기 때문에 테두리 스타일을 지정하지 않으면 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 테두리 스타일을 지정해야 합니다.

border-style

border-style 속성은 실선이나 점선, 이중선 등 테두리의 모양(형태)을 지정합니다.

 

기본형

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • 모양은 아래의 예제를 참고하세요.

 

예제

각 속성값이 어떤 모양인지 보여주는 예제입니다.

값에 따라서 브라우저마다 모양이 다르게 나올 수 있습니다.

 

기타 CSS 참조

박스 모델로 돌아가기

You may like these posts

  • 테두리 둥글게 만드는 방법 - border-radius
    박스 테두리를 꾸미긴 꾸몃는데 여진히 심심하다면 박스 모서리를 등글게 만들어 박스 형태를 바꿀 수 있습니다. border-radius 속성을 이용하면 박스 모서리 부분을 손쉽게 다양한 형태로 처리할 수 있습니다. border-radius border-radius 속성은 테두리를 둥글게 만드는 속성입니…
  • 박스나 이미지에 그림자 효과 주는 방법 - box-shadow
    포토 앨범 등에서 사진 주변에 그림자를 추가하면 멋진 효과를 만들 수 있습니다. 이런 그리자 효과도 box-shadow 속성을 사용하면 포토샵 같은 프로그램을 사용하지 않고도 나타낼 수 있습니다. 그림자는 이미지 뿐만 아니라 div 전체 등 지정하는 것에 따라 넣을 수 있는데 이때 box-shad…
  • 박스나 이미지에 테두리 만드는 방법 - border
    테두리(border)는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. 하나씩 살펴 보면서 박스 모델의 테두리를 꾸며 보겠습니다. border …
  • 수직 위치 순서 정하는 방법 - z-index
    CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있습니다. 요소 위에 요소를 쌓는 순서를 지정하는 것이 z-index 속성입니다. z-index 요소들의 수직 위치는 z-index 속성으로 정할 수 있습니다.   예제 1 세 개의 &…
  • 테두리 모양을 정하는 방법 - border-style
    테두리 스타일을 지정하는 border-style 속성은 기본 값이 none 이기 때문에 테두리 스타일을 지정하지 않으면 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 테두리 스타일을 지정해야 합니다. border-style border-style 속성은 …
  • 박스나 이미지 크기의 기준 정하는 방법 - box-sizing
    웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다. CSS의 width 속성은 콘텐츠 영역(content area)의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 합니다. 이럴 때 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에…

Post a Comment