CSS 박스모양(테두리)

CSS Border-Radius

입력한 요소의 박스모양 중 테두리의 둥글기를 조절할 수 있는 태그이다.

Border-radius 기본표기

Border-radius : 둥굴기의 크기(px, % 등 크기를 나타내는 값이면 사용가능하다)

#. 예제 1.

<style>
.border{
   border:1px solid black;
   border-radius: 10px;
}
</style>
<div class="border">Hello World!</div>

📍출력물

Hello World!

⭐️위 출력물과 같이 예제입력문이 출력된 것을 볼 수 있다.
border-radius 가 제대로 출력되는 것을 보기위해서 border 속성도 입력했다.
그리고 위와 같이 4개의 테두리가 둥글게 표현되었다.

#. 예제 2.

<style>
.border1{
   width: 100px;
   height: 100px;
   background: pink;
   border-radius: 50%;
}
</style>
<div class="border1"></div>

📍출력물

⭐️ 아무런 텍스트를 입력하지 않은 div 요소에 넓이와 높이값을 동일하게 준 뒤, border-radius 값을 50% 로 부여했을때 동그라미가 만들어지는 것을 볼 수 있다.

#. 예제 3.

<style>
.border2{
   width: 100px;
   height: 100px;
   background: lightblue;
   border-radius: 10px 3px 20px 10px;
}
</style>
<div class="border2"></div>

📍출력물

⭐️ 네 테두리를 각각 다른값으로 표현할 수 있다. border-radius 에 4개의 값을 부여하면 되며 좌상단, 우상단, 우하단, 좌하단 순으로 적용된다.

#. 예제 4.

<style>
.border3{
   width: 100px;
   height: 100px;
   background: black;
   border-bottom-right-radius: 30px;
}
</style>
<div class="border3"></div>