[리액트] border-radius

border-radius는 왼쪽 위, 아래, 오른쪽 위, 아래 전부(모든 모서리)가 둥글어 지는 것

<개별 모서리>
border-top-left-radius : 왼쪽 위 모서리

border-top-right-radius : 오른쪽 위 모서리

border-bottom-left-radius : 왼쪽 아래 모서리

border-bottom-right-radius : 오른쪽 아래 모서리

<텍스트 방향으로 설정>
border-end-end-radius : 텍스트 방향 끝-끝 모서리

border-start-start-radius : 텍스트 방향 시작-시작 모서리

border-end-start-radius : 텍스트 방향 끝-시작 모서리

border-start-end-radius : 텍스트 방향 시작-끝 모서리

.js

<div>
  <p class="exampleText">Example</p>
</div>

.css

div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}

텍스트가 없다면 왼쪽에서 우측방향이 기본