[css] border에 gradinet주는 방법을 알아보자

border에 gradinet를 주려고 했다.

border에 linear-gradinet를 이용하여 주었지만, 작동하지 않았다.
인터넷을 검색하여 해결 방법들을 찾아보았다.
나는 border-radius를 같이 줄 것이기 때문에,
background-image를 이용하여 border를 gradinet를 줄 수 있었다.

position: relative;
border: 1px solid transparent;
border-radius: 16px;
background-image: linear-gradient(#fff, #fff), 
linear-gradient(to right, red 0%,  orange 100%);
background-origin: border-box;
background-clip: content-box, border-box;

하지만 이 방법은 border이 너무 두꺼운 문제가 생겼다.
속성을 참고하여 background-clip를 계속 변경을 해보았어도, 내가 원하는 대로 되지 않았다.
그래서 찾은 방법은 다음과 같다.
margin을 주어 해당 픽셀을 정해주었다.

position: relative;
padding: 16px;
background: ${palette.shade100};
border-radius: 16px;
::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	margin: -2px;
	border-radius: inherit;
	background-image: ${props => props.isBorder && 'linear-gradient(to right, #2663ff, #68e4ff)'};
}

[참고자료]
https://velog.io/@dltjsgho/css-border에-그라데이션-넣기
https://nikitahl.com/gradient-border-css