본문 바로가기
프론트엔드 HTML CSS JAVASCRIPT

[HTML, CSS] div 요소를 동그랗게 만드는 방법 - border radius

by jaewooojung 2019. 8. 10.

HTML CSS


border-radius

css의 border-radius 속성을 사용해서 기본 사각형인 요소들의 모서리의 형태를 바꿀 수 있습니다.

div 뿐만이 아니라 border가 있는 다른 html 요소들에도 적용이 가능합니다.

 

border-radius 적용 전의 div입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 800px;
        height: 800px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

div

 

border-radius 속성으로 4개의 모서리 부분을 동그랗게 만들 수 있습니다.

border-radius: top-left top-right bottom-right bottom-left

 

위/왼쪽, 위/오른쪽, 아래/오른쪽, 아래/왼쪽 (시계방향) 순서대로 각 모서리의 반지름의 길이를 전달합니다.

<style>
  .container {
    width: 800px;
    height: 800px;
    border: 1px solid black;
    border-radius: 100px 200px 300px 400px;
  }
</style>

border-radius 적용

 

4방향의 값이 모두 동일하다면 한 개만 전달하면 됩니다.

<style>
  .container {
    width: 800px;
    height: 800px;
    border: 1px solid black;
    border-radius: 400px;
  }
</style>

border-radius 400px

 

px뿐만 아니라 %나 em단위로도 설정할 수 있습니다.

 

border-radius: 30%;

border-radius 30%

 

border-radius: 3em;

border-radius 3em

 



        
답변을 생성하고 있어요.