CSS 테두리(border) 스타일 실선, 점선 설정 및 테두리 원 모양으로 둥글게 만들기
CSS 스타일 적용되는 방향
지난번 HTML 태그에 스타일이 적용될 때, 박스 모델 단위로 적용된다고 정리했었는데, 상하좌우에 적용되는 스타일을 각기 다르게 적용할 수 있습니다.
상하좌우의 값 구분은 공백으로 구분을 해주고, 속성값을 4개 모두 입력했을 경우와 3개 그리고 2개를 입력한 경우 적용되는 방향에 차이가 있으니 아래의 내용을 확인하시기 바랍니다.
CSS 속성값 갯수에 따른 적용 방향
- CSS 속성값 1개 입력 했을 경우 - 4방향 모두에 동일한 속성값으로 적용됨.
- CSS 속성값 2개 입력 했을 경우 - 첫번째 속성값은 위,아래 방향에 적용되고 두번째 속성값은 좌우에 적용됨.
- CSS 속성값 3개 입력 했을 경우 - 입력 순서대로 상 -> 우 -> 하 의 순서로 적용되고 왼쪽은 오른쪽 속성값과 동일하게 적용됨.
- CSS 속성값 4개 입력 했을 경우 - 입력 순서대로 상 -> 우 -> 하 -> 좌 의 순서로 적용 됨.
테두리 선 스타일 지정
지난번 HTML 테이블 태그의 스타일 지정에서도 알아본 테두리의 선 스타일은 HTML의 표뿐만 아니라 일반적인 요소에도 지정할 수 있습니다. CSS의 border-style 속성을 사용하면 됩니다.
border-style 속성값
속성값 | 설명 |
| none | 테두리 선을 없앴니다. border-style 속성의 기본값 |
| solid | 일반적인 실선 |
| dotted | 일반적인 점선 |
| dashed | 짧은 직선 모양의 점선 |
| double | 테두리 선을 이중선으로 표시 |
| groove | 테두리가 조각낸 모양으로 파인 듯한 느낌 |
| ridge | 테두리 선이 입체감 있게 튀어나온 느낌 |
border-style 예제
border-style에 속성값을 공백으로 구분하여 입력시 박스 4방향을 다른 스타일로 지정할 수 있으며, 그 순서는 top -> right -> bottom -> left 순서입니다.
<style>
body {
width : 1920px;
height : 1080px;
}
.border-box {
width : 200px;
border-style: solid dotted dashed solid;
}
</style>
</head>
<body>
<div class="border-box">박스 테두리</div>
</body>
 |
| 테두리 스타일을 개별적으로 지정할 수 있습니다. |
테두리 두께 조절 border-width 속성
테두리 두께를 조절하기 위해서는 border-with 속성을 사용하면 됩니다. 일반적으로 px 단위뿐만 아니라 thin, medium, thick 등의 단어로도 두께를 지정할 수 있고, 공백으로 4방향의 두께를 다르게 지정할 수도 있습니다.
테두리 색상 지정 border-color 속성
테두리 선의 색상을 지정하고 싶을 경우에는 border-color 속성을 사용하면 됩니다. 다른 스타일 속성과 마찬가지로, 16진수 표기법 및 rgb 표기법 모두 가능합니다.
테두리 속성을 한번에 지정 border 속성
테두리 두깨와 색상 그리고 선의 종류를 한번에 지정하기 위해서는 border 속성에 한번에 지정하면 됩니다. 그리고 각 방향에 대해 다르게 지정하고 싶을 경우 각 방향 위치를 하이픈(-) 뒤에 입력해서 개별 스타일 지정도 가능합니다.
.box1 {
border : 1px solid purple;
}
※ 크기가 1px이고 색상이 퍼플인 실선으로 테두리가 스타일됩니다.
태그를 원 모양을 만들 수 있는 border-radius 속성
테두리를 모서리 부분을 둥글게 만들거나 이미지를 원 모양 형태로 만들때 border-radius 속성을 사용하면 됩니다.
크기를 px, em 단위로 입력하거나 크기를 기준으로 비율로 지정할수도 있습니다.
border-radius 속성 예제
<style>
#img-2 {
width : 200px;
height: 150px;
border-radius : 25px;
}
#img-3 {
width : 150px;
height : 150px;
border-radius : 50%;
}
</style>
</head>
<body>
<img id="img-2"src="image-2.jpg" alt="">
<img id="img-3" src="image.jpg" alt="">
</body>
 |
| border-radius 속성으로 모서리를 둥글게 하거나 이미지를 원 모양으로 만들 수 있습니다. |