본문 바로가기
웹코딩 배우기/· CSS

CSS 테두리 border

by 닐기 2019. 10. 28.

 

css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다.

 

테두리 모양 border-style

 

 

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<!-- 주석 --!>
<p class="dotted">점선</p>
<p class="dashed">굵은 점선</p>
<p class="solid">실선</p>
<p class="double">이중 실선</p>
<p class="groove">3D groove</p>
<p class="ridge">3D ridge</p>
<p class="inset">3D inset</p>
<p class="outset">3D outset</p>
<p class="none">없음</p>
<p class="hidden">숨김</p>
<p class="mix">혼합</p>

</body>
</html>

점선

 

굵은 점선

 

실선

 

이중 실선

 

3D groove

 

3D ridge

 

3D inset

 

3D outset

 

없음

 

 

혼합

 

border-style은 1~4개의 값을 가질 수 있다.

위의 혼합 테두리를 보면

border-stylep.mix {border-style: dotted dashed solid double;}

이렇게 4개의 값을 가지고 있다. 순서는 "상-우-하-좌" 다.

 

 

테두리 두께 border-width

 

border-width: px, pt, cm, em 단위와 thin, medium, thick로 설정한다.

두께도 4가지 값을 가질수 있다. 순서는 "상-우-하-좌"다.

 

<!DOCTYPE html>
<html>
<head>
<style>
p.bw1 {
  border-style: solid;
  border-width: 5px;
}
p.bw2 {
  border-style: solid;
  border-width: medium;
}
p.bw3 {
  border-style: dotted;
  border-width: 2px;
}
p.bw4 {
  border-style: dotted;
  border-width: thick;
}
p.bw5 {
  border-style: double;
  border-width: 15px;
}
p.bw6 {
  border-style: double;
  border-width: thick;
}
p.bw7 {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<p class="bw1">실선 두께 5px</p><p></p>
<p class="bw2">실선 medium</p><p></p>
<p class="bw3">점선 두께 2px</p><p></p>
<p class="bw4">점선 두께 thick</p><p></p>
<p class="bw5">이중선 두께 15px</p><p></p>
<p class="bw6">이중선 두께 thick</p><p></p>
<p class="bw7">실전 상2 우10 하4 좌20px</p>
</body>
</html>

실선 두께 5px

 

실선 medium

 

점선 두께 2px

 

점선 두께 thick

 

이중선 두께 15px

 

이중선 두께 thick

 

실전 상2 우10 하4 좌20px

 

 

테두리 색상 border-color

 

border-color: 색상; 으로 지정한다.

색은 색이름, 16진수, rgb로 설정한다. 기본은 검정색이다.

테두리 색상 또한 4가지 요소를 가질 수 있다. 순서는 "상-우-하-좌" 다.

 

<!DOCTYPE html>
<html>
<head>
<style>
p.bc1 {
  border-style: solid;
  border-color: red;
}

p.bc2 {
  border-style: dotted;
  border-color: green;
} 

p.bc3 {
  border-style: solid;
  border-color: red green blue yellow;
} 
</style>
</head>
<body>

<p class="bc1">실선 빨강</p><p></p>
<p class="bc2">점선 녹색</p><p></p>
<p class="bc3">실선 상빨강 우녹색 하파랑 좌 노랑</p>

</body>
</html>

 

실선 빨강

 

점선 녹색

 

실선 상빨강 우녹색 하파랑 좌노랑

 

테두리 상우하좌 개별 컨트롤

 

border-top-style
border-right-style
border-bottom-style
border-left-style

색상이나 모양은 동일하게 지정하면 됩니다.

 

참고 : border-style의 상우하좌 지정.

border-style: solid - 상우하좌 모두 실선

border-style: dotted solid; - 상/하:점선 우/좌:실선

border-style: dotted solid double; - 상:점선 우/좌:실선 하:이중선

 

 

테두리 스타일 한 번에 쓰기

 

border: 2px solid #fff;

border-left: 5px dottef tomato;

이렇게 두께[공백]모양[공배]색; 으로 쓸 수 있다.

 

 

 

모서리가 둥근 테두리

 

둥근 모서리는 border-radius로 지정한다. 값은 px로 정하면 된다.

 

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid tomato;
}
p.round1 {
  border: 2px solid tomato;
  border-radius: 5px;
}
p.round2 {
  border: 2px solid tomato;
  border-radius: 8px;
}
p.round3 {
  border: 2px solid tomato;
  border-radius: 12px;
}
</style>
</head>
<body>

<p class="normal">기본</p><p></p>
<p class="round1">둥근 모서리 5px</p><p></p>
<p class="round2">둥근 모서리 8px</p><p></p>
<p class="round3">둥근 모서리 12px</p>

</body>
</html>

 

기본

 

둥근 모서리 5px

 

둥근 모서리 8px

 

둥근 모서리 12px

 

 

이글에서 사용한 제목 부분.

babackground-color: tomato; 

padding: 10px; 

border-bottom: 5px solid;

 

제목 부분 예시

 

배경색을 토마토색, 안쪽 여백을 10px을 주고 아래에 두께 5px 테두리를 넣었다.

 

 

 

제목 부분 예시

 

babackground-color: tomato;

padding: 10px; 

border-left: 5px solid;

이렇게 왼쪽에 넣어서 예쁘게 만들 수 있다.

반응형

댓글0