/gradient-border

border-color: linear-gradient( )

Primary LanguageHTML

Gradient border using Pseudo Elements

  • Because the border-image attribute doesn't work with border radius
  • Place the pseudo element with absolute positioning

Steps

  • On the main element, set the gradient background

  • On the pseudo element,

width: calc(100% - 10px);
height: calc(100% - 10px);

is equivalent to border: 5px solid gradient()

  • use inset: 5px to center the pseudo element