Gradient Rounded Borders

example.scss

$grad: linear-gradient(135deg, #2D41F9, #DE85FD);

// background-clip sets the maximum bounderies for each background. Thus, we use the first background
// to clip it to the text (so it gets the gradient color) then clip the white background (content of the input, e.g.)
// and last but most important we clip the third background to the border-box leaving the border colored using the gradient

// NOTE: It is mandatory to have a transparent border defined otherwise there will be no border-box :)

input {
  position: relative;
  background: $grad, linear-gradient(white, white), $grad;
  background-origin: border-box;
  -webkit-background-clip: text, padding-box, border-box;
  color: transparent;
  caret-color: #DE85FD;
  padding: 0.875rem;
  border: solid 1px transparent;
  border-radius: 0.3125rem;
  outline: none;
}