css 보더(border)속성 - 박스 테두리 라인 스타일 9가지

html 박스 디자인할 때 단순한 네모 박스가 아닌 테두리 스타일을 제작해야 하는 경우가 있습니다.  css에서 적용 가능한 border 스타일 총 9가지를 알려드리겠습니다.

border style 9가지 종류

• none : 테두리 표시 없음.
• solid : 실선(단선)으로 표시.
• dotted : 점선으로 표시.
• dashed : 파선으로 표시.
• double : 2줄(이중)로 표시.
• groove : 박스가 안으로 들어가 보이게 표시(함몰).
• ridge : 박스가 밖으로 튀어나와 보이게 표시(돌출).
• inset : 테두리가 안으로 들어가 보이게 표시.
• outset : 테두리가 밖으로 나와 보이게 표시.

설명	디자인	소스
none 테두리 없음	none	border: 5px none #36c1ae;
solid 실선	solid	border: 5px solid #36c1ae;
dotted 점선	dotted	border: 5px dotted #36c1ae;
dashed 파선	dashed	border: 5px dashed #36c1ae;
double 2줄(이중)	double	border: 5px double #36c1ae;
groove 함몰된 테두리	groove	border: 5px groove #36c1ae;
ridge 돌출된 테두리	ridge	border: 5px ridge #36c1ae;
inset 함몰된 박스	inset	border: 5px inset #36c1ae;
outset 돌출된 박스	outset	border: 5px outset #36c1ae;

 

필요에 따라 골라서 사용하실 수 있습니다. 컬러를 넣고 싶은 경우에는 border에 색상 코드를 입력해주면 됩니다. 

<style>
   border-color:#36c1ae;
</style>

 

박스 테두리선 스타일 종류는 9가지이며, 테두리 컬러는 "border-color"로 따로 지정해줄 수도 있고 css에서 "border"값 안에 포함시킬 수 있습니다.