How to create linear gradient only on left border and normal border for other 3 sides with content?

Question

How to create this with css

linear gradient only on left border and normal border for other 3 sides with content at the center

Answer 1

You can do that using pseudo-element

.test {
  width: 300px;
  margin: 0 auto;
  border: 4px red solid;
  border-left: none;
  position: relative;
}

.test p {
  padding: 20px;
}

.test::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 4px;
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

<div class="test">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sequi modi illum omnis quam eos labore nobis eveniet magni perspiciatis, id assumenda, neque minima error ut eaque beatae rem natus.</p>
</div>

You could also use an attribute called border-image border-image read more about it from the documentation.

if that wasn't helpful let me know.

Answer 2

Use linear-gradient backgrounds instead. I don't recommend using border-image because you can't use border-radius with it.

.box {
  --left-border-size: 10px;
  --border-size: 1px;
  padding: 20px;
  padding-left: calc(20px + var(--left-border-size));
  width: 400px;
  font-size: 1.2rem;
  line-height: 1.5;
  background: linear-gradient(to bottom, red, green, blue) 0 0/ var(--left-border-size) 100%,
    linear-gradient(#000, #000) 0 0 / 100% var(--border-size), 
    linear-gradient(#000, #000) 0 100% / 100% var(--border-size), 
    linear-gradient(#000, #000) 100% 0 / var(--border-size) 100%;
  /* ↑ we're using backgrounds to create other borders too, because they should be appear under the left border */
  background-repeat: no-repeat;
}

<div class="box">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique quo quisquam hic? In est enim sit voluptates tempore ducimus praesentium animi numquam veniam mollitia architecto, nulla accusantium sapiente quos!
</div>