방법

결국 background를 border영역까지 확장시키고 content 영역을 원하는 색으로 덮는 방법이다. 이 방법으로 하면 border-radius도 적용 가능하다.

CSS

.box {
  width: 300px;
  height: 200px;
  border: 10px solid transparent;
  padding: 10px;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(to left bottom, red, blue); /* 각각 색1 색2라 한다 */
  background-clip: content-box, border-box; /* 색1 색2를 각각 content-box, border-box에 대응 */
  background-origin: border-box; /* border까지 background */
}

참고 블로그

• 내 벨로그 - background 헷갈리는 속성 정리
• Border에 그라데이션 적용하기.