css

This is an old revision of the document!


How to make border linear gradient

Use multiple background, then use background-origin and background-clip.

The background-origin property is used to determine how the background-position of a background in a certain box is calculated.
The background-clip property is used to determine whether the backgrounds extends into the border or not.

background: linear-gradient(to right, white, black), linear-gradient(to top, blue, red);
border: 5px solid transparent;
border-radius: 30px;
background-origin: border-box;
background-clip: padding-box, border-box;

  • css.1716382427.txt.gz
  • Last modified: 2024/05/22 12:53
  • by root1