[HTML5&CSS3] 테두리

1. border-width / border-color / border-style

 

테두리 관련 속성은 border-로 시작하며 width는 테두리, color은 색상, style은 테두리 형태를 지정합니다. 테두리를 표시하려면 이 3가지 속성을 모두 지정해야 합니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   
   border-color: blue;
   border-style: dashed;
   border-width: 10px;
}
</style>

위 3가지 속성은 다음과 같이 width, style, color 순서로 하여 한 줄로 한꺼번에 처리할 수 있습니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;

   border: 10px dashed blue;
}
</style>

border- 스타일도 필요하다면 top, bottom, left, right방향으로 개별적인 지정이 가능합니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   
   border-top-color: blue;
   border-top-style: dashed;
   border-top-width: 10px;
   
   border-bottom-color: yellow;
   border-bottom-style: dotted;
   border-bottom-width: 5px;
}
</style>

---

2. border-radius

 

CSS3전용 속성으로 완만한 테두리를 만들 수 있습니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   
   border: 10px dashed blue;
   border-radius: 5px;
}
</style>

border-radius는 속성의 값을 하나만 입력하면 전체를 같은 값으로 하여 둥근형태를 만들지만 다음과 같이 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 값을 따로 지정하면 개별적인 설정이 가능합니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   
   border: 10px dashed blue;
   border-radius: 5px 10px 5px 10px;
}
</style>