How to create a gradient border as shown in image-CodePudding

I need to have border on two sides like this in a gradient way as shown here.However, My code looks like this:

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.module-border-wrap {
  max-width: 320px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right bottom, #ffffff, #21BAE3);
  padding: 6px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

<div ><div >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div></div>

How could I create a border as shown in image?

CodePudding user response：

You need to change the gradient CSS a bit

 body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.module-border-wrap {
  max-width: 320px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(130deg, rgba(248,253,254,1) 50%, rgba(33,186,227,1) 100%);
  padding: 6px;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
}
  </style>

<div ><div >
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
  </div></div>

CodePudding user response：

Use background-origin: border-box; then a transparent colour on your border. This will shift the background image to your border edge and be shown below your border. overflow:hidden then clips the contents in your .module div correctly. See below.

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.module-border-wrap {
  border-radius: 2rem 2rem 0 2rem;
  border: 6px solid transparent;
  overflow: hidden;
  background-image: linear-gradient(to right bottom, #fff, #25BAE4);
  background-origin: border-box;
  max-width: 320px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

<div ><div >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div></div>