border 스타일의 종류를 알아보자
일단 앞에서 내가 배웠던 solid(직선)으로 border를 만들어 보겠다
<style>
div {
border: 3px solid red;
width: 50px;
height: 50px;
margin: 10px;
}
</style>
3px 두께의 solid(직선)인 red(빨간색)의 border선이
넓이 50px
높이 50px
margin 값은 10px 로 적용해보면

그러면 내가 지정한 값으로 border 가 만들어진걸 볼 수 있다
border: 3px solid red;
이 border란 속성을 세분화 하면
/* border: border-width, border-style, border-color */
이 순서대로 세분화가 되어있다
border-width: 3px;
border-style: solid;
border-color: red;
이것이
border: 3px solid red;
이것과 같은 것이다
이제 각종 border 스타일들을 보자
dashed 스타일
div {
/* border: 3px solid red; */
border-width: 3px;
border-style: solid;
border-color: red;
width: 50px;
height: 50px;
margin: 10px;
}
.dashed {
border-style: dashed;
}
dashed 스타일을 확인해 보자

이렇게 점선이 나온다
dotted 스타일
.dotted {
border-style: dotted;
}

solid 스타일
.solid {
border-style: solid;
}

double 스타일
.double {
border-style: double;
}

groove 스타일
.groove {
border-style: groove;
}

ridge 스타일
.ridge {
border-style: ridge;
}

inset 스타일
.inset {
border-style: inset;
}

outset 스타일
.outset {
border-style: outset;
}

이렇게 종류가 다양하다고 한다
요기서 나는 border-width : 값에 px로만 지정해서 두께를 지정해 줬었는데
두께를 정해주는 값이 있다고 한다
/* 두께 */
.thin {
border-width: thin;
}
.medium {
border-width: medium;
}
.thick {
border-width: thick;
}
thin = 얇은
medium = 중간
thick = 두꺼운
뜻이다 각각 브라우저마다 정해진 값에따라 간다고 한다
예를 들어서
<div class="solid thick"></div>
solid 이면서 thick 이라는 값을 줬다
그러면 직선이면서 두꺼운 border가 나올것이다

<div class="solid thin"></div>
<div class="solid medium"></div>
<div class="solid thick"></div>
이렇게 크기 순서대로 태그를 작성해 봤다

위에서 아래로 순서대로 thin, medium, thick 이다
이렇게 px단위가 아닌 정해진 단어로도 크기를 지정할 수 있다
border-radius 값
radius 는 반지름,반경 이라는 뜻이다
.radius {
border-radius: 10px;
}
이렇게 border-radius: 값을 10px로 주면
<div class="solid radius"></div>

이렇게 모서리부분(꼭지점)이 둥글게 변하는걸 볼 수 있다
'css' 카테고리의 다른 글
| overflow 속성 (0) | 2023.09.19 |
|---|---|
| HTML 요소의 위치 정의 (2) | 2023.09.09 |
| background 스타일링 (0) | 2023.09.08 |
| CSS 박스 모델과 요소의 크기 (0) | 2023.09.08 |
| 표 스타일링 (0) | 2023.09.08 |