[CSS] border 속성에 대해

목차

1. border 만들기 - border

2. border 둥글게 만들기 - border-radius

 

 

1. border 만들기

border 속성을 통해 border를 만들 수 있다.

(1) solid (실선) 

h1 {
  border: 5px solid red;
}

• border 두께를 5px
• border 선 유형을 solid(실선)
• border 색상을 red

 

solid - 실선

 

(2) dotted (점선)

h1 {
  border: 5px dotted red;
}

• border 두께를 5px
• border 선 유형을 dotted(점선)
• border 색상을 red

 

dotted - 점선

 

(3) dashed (파선)

h1 {
  border: 5px dashed red;
}

• border 두께를 5px
• border 선 유형을 dashed(파선)
• border 색상을 red

 

dashed - 파선

 

 

 

2. border를 둥글게 설정하기

border-radius를 통해 요소의 모서리를 얼마나 둥글게 할 건지 설정할 수 있다.

h1 {
  border: 5px solid red;
  border-radius: 15px;
}

 

 

만약 요소를 완전히 둥글게 만들고 싶다면 border-radius에 매우 큰 값을 설정하면 된다. (또는 border-radius: 50% 이상)

h1 {
  width: 200px;
  height: 200px;
  background-color: bisque;
  border-radius: 9999px;
  /* border-radius: 50%; */
}