Fix Border-Radius

Question

I'm styling an image slider, but after adding a gradient to its border, the border-radius property stopped working. I've tried using several other properties but it's not having any effect. What should I do?

Here's the code:

.slider {
  margin: 0 auto;
  border-style: solid;
  border-width: 2.5px;
  border-image: linear-gradient(45deg, #b63c8e, #0a6cdf) 1;
  border-radius: 10px;
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

I tried everything I could, I expect to solve my problem :(

does this help: https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient — Osvaldo Correia, Mar 10 '23 at 22:50

score -1 · Answer 1 · answered Mar 10 '23 at 23:04

try adding aspect-ratio property.

.slider {
  aspect-ratio: 16/9;
  margin: 0 auto;
  border-style: solid;
  border-width: 2.5px;
  border-image: linear-gradient(45deg, #b63c8e, #0a6cdf) 1;
  border-radius: 10px;
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

you can change the 16/9 to whatever you like

Fix Border-Radius

1 Answers1