I set a radial gradient color to the border-image-source of a box, and use initial values for border-image-slice, border-image-width and other border-image properties. But the result does not look like the radial gradient color at all. The gradient color is as below: radial_gradient_color_as_fill
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
width: 300px;
height: 300px;
background: radial-gradient(closest-corner at center center, rgb(63, 135, 166) 0%, rgb(235, 248, 225) 50%, rgb(246, 157, 60) 100%);
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>And the radial gradient color as border-image be like: radial_gradient_color_as_border
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
width: 200px;
height: 200px;
border: 50px solid;
border-image: radial-gradient(closest-corner at center center, rgb(63, 135, 166) 0%, rgb(235, 248, 225) 50%, rgb(246, 157, 60) 100%) 1 / 1 / 0 stretch;
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>What I expect the radial gradient color border is like: enter image description here
I changed the position of the radial gradient color, and it looks great. But when the position is center, it still looks wrong. I don't know why and want to know how to set those properties to make the radial gradient color looks good as border. radial_gradient_color_change_position
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
width: 200px;
height: 200px;
border: 50px solid;
border-image: radial-gradient(at 25% 25%, rgb(63, 135, 166) 0%, rgb(235, 248, 225) 50%, rgb(246, 157, 60) 100%) 1 / 1 / 0 stretch;
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>