인스타스토리 그라데이션 넣기

.profilebox{
    width : 40px;
    height : 40px;
    border-style : solid;
    border-color : transparent; /*원 색상을 투명으로 뒤에 보이게*/
    border-radius: 50%; /*원 만들기*/
    overflow : hidden; /*원 넘어가는 부분은 제거 */

    background-image: linear-gradient(#fff, #fff), 
    linear-gradient(to right, red 0%,  orange 100%); /*background: linear-gradient(컨텐츠 색상),linear-gradient(보더 색상);*/
    background-origin: border-box;/*배경 이미지를 어느 영역부터 채워나갈지를 정합니다.(기본값 : padding-box)*/
    background-clip: content-box, border-box;/*배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성입니다.(기본값 : border-box)*/
}

.profilebox img{
    width : 100%;
    height : 100%;
    object-fit: cover;/* 사진이 박스에 맞게 들어가도록 */
}

위 코드로 작성하였을 때 정상 실행.

	border-image: linear-gradient(to right, red 0%, orange 100%);
	border-image-slice: 1;

위 코드로 작성시 border-radius에 linear-gradient가 적용이 되지 않았다.

border-image 속성과 border-radius 속성이 호환이되지 않기 때문.

참조 velog : https://velog.io/@dltjsgho/css-border%EC%97%90-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EB%84%A3%EA%B8%B0