DEV Community

avcat
avcat

Posted on

border-radius + linear-gradient

Squared gradient border can be achieved with border-image.

To make it rounded we have to use several tricks with CSS masks:

.card {
    border-radius: var(--br);
    position: relative;
    background: hsl(from var(--bg-dark) h s l / 0.1);
    backdrop-filter: blur(10px);

    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 0;
      border-radius: inherit;
      border: 1px solid transparent;
      background: linear-gradient(
        var(--bg-light), 
        hsl(from var(--bg-dark) h s l / 0.1)
      ) border-box;
      mask: linear-gradient(black, black) border-box, linear-gradient(black, black) padding-box;
      mask-composite: subtract;
    }
  }
Enter fullscreen mode Exit fullscreen mode

Source.

Top comments (0)