프로그래밍 공부 일기

2020년 7월 1일 Progate Lv.148
포트폴리오 작성 중border-radius 를 사용하면 네 모퉁이 모두 둥글게 된다.
한 모퉁이만 둥글게 하고 싶다.

목표물

1개의 요소(왼쪽의 곳)는 왼쪽의 상하의 모서리를, 다른 1개의 요소(우측의 곳)는 오른쪽의 상하 부분의 모퉁이를 둥글게 하고 싶다.

일부 모서리를 둥글게하는 방법

border-radius 사이에 상하 좌우를 지정하면, 그 부분의 모퉁이를 둥글게 할 수 있다.

왼쪽 상단만 둥글게 하는 경우

border-top-left-radius: 10px;

왼쪽 하단만 둥글게 하는 경우

border-bottom-left-radius: 10px;

오른쪽 상단만 둥글게 하는 경우

border-top-right-radius: 10px;

오른쪽 하단만 둥글게 하는 경우

border-bottom-right-radius: 10px;

샘플 코드

HTML 파일

<div class="profile">
  <div class="contentLeft">
    ...
  </div>
  <div class="contentRight">
    ...
  </div>
</div>

CSS 파일

.contentLeft{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.contentRight{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}