CSS leaner gradient effect

Question

I want to get the following style in my div border in both sides: 1. if the height of the div is X. 2. I want 4px from to top to start some gradient color. 3. i want 4px from the bottom to start some gradient color.(same color) so it will look like this: |4px transparent |start white to black gradient | |End the black here |start black to white gradient (the other direction) | | |end the white here |4px transparet

Answer 1

All that you needed to do was create the gradient and assign it to the border-image property. This is well supported in modern browsers and can be used unless you wish to support IE10-.

div {
  height: 100px;
  width: 200px;
  border-style: solid;
  border-width:0px 4px;
  border-image: linear-gradient(to bottom, transparent 4px, red 4px, orange 50%, red calc(100% - 4px), transparent calc(100% - 4px));
  border-image-slice: 1;
  border-image-repeat: stretch;
  background: beige;
}

<div>Some div</div>

Here's how to interpret the linear-gradient that was used in the above snippet:

linear-gradient(to bottom, /* the direction of the gradient */
                transparent 4px, /* make it transparent till 4px from start */
                red 4px, /* start with the required color exactly at 4px */
                orange 50%, /* make it change from red to orange at 50% - half distance */
                red calc(100% - 4px), /* change it back from orange to red at 4px before 100% */
                transparent calc(100% - 4px) /* leave the last 4px as transparent again */
                );

Answer 2

You can achieve this with some styling tricks

Firstly, instead of borders we use positioned pseudo-elements (left/right since you indicated height as the determining factor).

We use 4px top and bottom padding to create the transparent sections (and background-clip so the gradient background doesn't extend into the padding).

Then it's a simple linear gradient.

*,
::before,
::after {
  box-sizing: border-box;
}
body {
  background: pink;
}
div {
  height: 90vh;
  width: 60%;
  margin: 5vh auto;
  background: #c0ffee;
  position: relative;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  padding: 4px 0;
  width: 2px;
  background-clip: content-box;
  background-image: linear-gradient(to bottom, white, black 50%, white);
}
div::before {
  left: -2px;
}
div::after {
  right: -2px;
}

<div>
</div>

More complex gradient using calc and no additional clipping / padding

div::before,
div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background-clip: content-box;
  background-image: linear-gradient(to bottom, 
    transparent,
    transparent 4px,
    white 4px, 
    black 50%, 
    white calc(100% - 4px),
    transparent calc(100% - 4px),
    transparent);
}

*,
::before,
::after {
  box-sizing: border-box;
}
body {
  background: pink;
}
div {
  height: 90vh;
  width: 60%;
  margin: 5vh auto;
  background: #c0ffee;
  position: relative;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background-clip: content-box;
  background-image: linear-gradient(to bottom, 
    transparent,
    transparent 4px,
    white 4px, 
    black 50%, 
    white calc(100% - 4px),
    transparent calc(100% - 4px),
    transparent);
}}
div::before {
  left: -2px;
}
div::after {
  right: -2px;
}

<div>
</div>