[CSS]border에 그라데이션 넣기(feat. 사각형, 원형)

종종 디자인에 보더에 그라데이션이 들어가는 경우가 있습니다.

배경에 넣는 건 나름 익숙하지만 보더에?! 약간 생소할 때가 있어 정리해보려합니다!

 

1. 사각형 border (feat. border-image )

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

border 속성엔 두께와 solid만 지정하시고, border-image를 이용해 사각형 border에 간단히 그라데이션 줄 수 있습니다.

border-image는 요소 주변의 테두리를 이미지로 지정하는 속성으로,

url에 이미지 파일을 연결시키거나, 그라데이션을 넣어 줄 수 있습니다.

border-image:url(./img/abcd.png); 
border-image:linear-gradient(to top, #FF6D60, #98D8AA)

border-image 속성을 사용할 때, border-image-slice도 함께 써줘야 합니다. 이 속성은 border-image를 분할하는 방법을 지정합니다. 이 밖에 많은 다양한 속성이 있으니, 아래 링크를 참고해보세요~ㅎㅎ

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

border-image - CSS: Cascading Style Sheets | MDN

---

2. 원형 border (feat.background)

원형에 border 넣기!! 시작!!

사각형에서 넣어 보았으니, 원형도 쉽겠지~ 했지만... 놀랍게도 border-image와 border-radius는 함께 사용할 수 없습니다..

고로, 다른 방법이 필요하겠죠?!ㅎㅎ

 

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

원형의 경우, background를 이용해서 그라데이션을 넣습니다.

background:linear-gradient(45deg, #98D8AA, #FF6D60) border-box;
background:linear-gradient(black 0 0) padding-box, linear-gradient(45deg, #98D8AA, #FF6D60) border-box;

여기서 중요한건 border속성을 두께, solid 그리고 transparent로 지정해줘야 합니다.

그리고 background를 이용해 그라데이션을 넣는 것이죠.

box안에 컨텐츠와 딱붙은 border와 여유공간을 둔 border 두가지 만들어 두었으니, 확인하시어 유용하게 사용하세요~ㅎㅎ

매일 사용하는 background 이지만, 정말 다양한 활용방법이 있다는 것을 깨닫습니다.

역시 기본이 튼튼해야하는 이유이죠...!

아래 링크 참고 하셔서 더욱 다양한 활용 방법 참고하셔요~

https://www.w3schools.com/cssref/css3_pr_background.php

 

오늘도 글 읽어주셔서 감사합니다.

좋은 하루되세요~ㅎㅎ