[css3] border-style - 테두리 스타일 지정

티스토리 뷰

[개발]프로그래밍/css3

좋은 블로그 2021. 4. 23. 09:11

1. 개념

border-style - 테두리 스타일 지정

border-style는 실선이나 점선,이중선 등으로 테두리의 스타일을 지정

속성	설명
none	테두리가 나타지 않음(기본값)
dashed	짧은 선으로 표시
dotted	점선으로 표시
double	이중선(겹선)으로 표시 두 선 사이 간격 조절은 border-width로
groove	홈이 파인 듯 입체적으로 표시
inset	전체 박스 테두리가 창에 박힌 것처럼 표시
outset	전체 박스 테두리가 창에서 튀어나온 것처럼 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시
solid	테두리를 실선으로 표시

2. 태그

border-style

html5 코드

<! DOCTYPE html>

<head>

</head>

<style>

div

{

margin-top : 20px ;

width : 100px ;

height : 100px ;

border-width : 3px ;

display : inline-block ;

}

</style>

<body>

</body>

</html>

결과 화면

코드 설명

공통 설명

border-style은 테두리의 스타일을 지정하는 속성입니다.
옵션 종류에 따라서 번호를 부여했지만 따로 설명할 것이 없기에 공통 설명으로 줄입니다.
위의 그림을 보셔서 사용자에 의도에 맞는 옵션을 사용해 주시면 될 것 같습니다.

공지사항

최근에 올라온 글

최근에 달린 댓글