[CSS] 🕹️ Border에 그라데이션 적용하기.

목차

바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다.

---

예제 파일 작성하기

Index.html 수정

index.html의 body 부분 안에 밑의 코드를 작성한다.

HTML

<div class="box1"></div>
<div class="box2"></div>

---

Style.css 작성.

우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다.

CSS

html {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

이후 .box1 부분에 다음과 같이 CSS를 작성한다.

CSS

.box1 {
    width: 200px;
    height: 200px;
    border: 5px solid;
    border-radius: 20px;
    border-image: linear-gradient(to right, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    border-image-slice: 1;
    margin: 10px;
}

그런데 위에서 작성한 .box1은 border에 Gradient가 들어갔지만, border-radius가 먹히지 않는 문제가 있다. 이를 해결하기 위해서는 border-image속성 대신 background-image 속성을 사용하여 컨텐츠와 테두리를 따로따로 설정을 해주어야 한다고 한다. 간단히 설명하자면, background-origin은 background의 시작점을 설정해주는 속성이며, background-clip은 해당 background가 어느 요소까지를 차지할 것인지 설정하는 속성이라 할 수 있다.

 

그럼 어떻게 작성해야 하나면,

CSS

.box {
  background-image:linear-gradient(#fff, #fff);
  background-origin: border-box;
  background-clip: content-box;
}

우선 콘텐츠 영역은 #fff가 차지하게 하고

CSS

.box {
  background-image: linear-gradient(to right, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
  background-origin: border-box;
  background-clip: border-box;
}

border영역은 그라디언트로 설정하여 나누면 된다. 따라서 다음 코드와 같이 작성하면 border-radius가 적용된 Gradient border를 만들 수 있다.

CSS

.box2 {
    width: 200px;
    height: 200px;
    border: 5px solid transparent;
    border-radius: 20px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    margin: 50px 10px 10px;
}

---

🎉 완성화면

작성이 완료되었다면 밑에 화면 같이 생성될 것이다. 전체 코드를 보고 싶다면 제가 만든 CodeSandBox를 참고하시면 될 듯 싶다.

---

참고 문헌

• 1CSS border에 gradient를 넣어보자
• 2css : ) border에 그라데이션 넣기