CSS - boarder gradation

다음과 같은 Board gradation을 사용하게 되었는데, 좀처럼 되지 않아 구글링을 해봤다.

 

 //html
<div class="borderDiv"></div>

 //css
.borderDiv {
  width: 100px;
  height: 100px;
  border: 3px solid;
  border-radius: 50px;
  border-image: linear-gradient(
    180deg,
    #0485ff -32.14%,
    #7d5cf8 53.24%,
    #ec033f 150%
  );
  border-image-slice: 1;
}

다음과 같이 코드를 작성하였고 결과물은 아래와 같습니다.

 border-image로 gradient를 줬지만 border-radius가 먹지 않는다.

찾아보니 border-image와 border-radius는 두개가 혼용 될 수 없다고 합니다.

 

.borderDiv2 {
  width: 100px;
  height: 100px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: linear-gradient(0, #fff, #fff),
    linear-gradient(180deg, #0485ff -32.14%, #7d5cf8 53.24%, #ec033f 150%);
  /*  linear-gradient 의 순서를 반대로하면 테두리와 배경색의 위치를 바꿀 수 있다. */
  /* border-image를 대신해 background를 이용해 보더의 색을 투명하게 한 뒤, background에 보더 색을 설정하는 방법. */
  
  background-origin: border-box;
  /* 배경 이미지를 어느 영역부터 채워나갈지를 정한다. (기본값 : padding-box) */
  
  background-clip: content-box, border-box;
  /* 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성입니다. (기본값 : border-box) */
}

다음과 같이 css를 수정한 결과물에서는 bordera gradation과 border-radius 둘다 적용이 잘됩니다.

또한 background: linear-gradient 의 위치를 바꿔주면 보더와 내부 색상을 바꿀 수 있습니다.