0

I'm trying to do the html css integration of a web mockup.

In this css mockup I have this css code :

.Rectangle {
 border-radius: 16px;
 border-style: solid;
 border-width: 4px;
 border-image-source: linear-gradient(228deg, #ffffff 64%, #ffd43c 3%, #ffd43c 3%);
 border-image-slice: 1;
}

When I copy this in my code and I test it on browser, it is not working, I have that as a result :

There is no degraded effect and no border radius in the result. Any solutions please ?

abadou
  • 41
  • 6

1 Answers1

0

border-image and border-image-slice are not compatible with border-radius. If you need to add a border radius you'll have to use a pseudo-element like ::before that is positioned behind the div.

.rectangle {
  font-size: 2rem;
  font-family: sans-serif;
  font-weight: bold;
  position: relative;
  padding: 1em;
  box-sizing: border-box;
  background: white;
  color: #000;
  background-clip: padding-box; 
  border: solid 4px transparent;
  border-radius: 1em;
}

.rectangle::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: linear-gradient(40deg, #ffd43c 50px, transparent 140px);
  }
<div class="rectangle">Label</div>
Terminator-Barbapapa
  • 3,063
  • 2
  • 5
  • 16
  • Thank you very much, but with this solution it affect responsivity, I use bootstrap system grid, try to put your code in a col and in row , after resizing, border become very small and it width is not fixed – abadou Oct 29 '20 at 21:04
  • See updated answer. The gradient border should remain the same size no matter how wide the `div` is. – Terminator-Barbapapa Oct 29 '20 at 21:23
  • I still have the same problem , try to expand you snippet on other window and resize it to small devices and you will see that the label is out of frame and the border is deformed and becomes a square in the end :( – abadou Oct 29 '20 at 21:35
  • Are you looking at my updated answer? As you can see the color stops in the linear gradient remains constant at `50px`/`140px`. Which keeps the gradient border the same size no matter the viewport: https://ibb.co/yfFGm7H – Terminator-Barbapapa Oct 29 '20 at 22:13