Create a div with rounded corners, double border, and a background of two overlapping linear gradients.

by James Connolly

HTML

<div><span>X</span></div>

CSS

div{
  width: 300px;
  padding:1px;
  border-radius: 20px;
  border: solid 1px transparent;
  background-image: linear-gradient(45deg, skyblue, skyblue), 
                    linear-gradient(-33deg, red, transparent, transparent, red);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

span {
  display:block;
  margin:10px;
}