Linear gradient questions

Is there any way to make this image with linear-gradient without using a border?

I have merged these two topics as they seem to be closely related.

Your code in the second post (and your fiddle) is incomplete.

Is this possible?

I just did it.

.box {
	width: 100px;
	height: 100px;
	margin: auto;
	background: #000;
	border: 25px solid transparent;
	border-image: linear-gradient(to right, red 0%,red 60%, red 61%, red 100%);
	border-image-slice: 1;

<div class="box"></div>

Many things are possible with css gradients.

But why do you specifically want to use linear gradients for this instead of easier methods like border?

Does that mean you have found a satisfactory answer to your question and don’t need any further assistance?

(I’m confused as to why you’ve now posted Paul’s Pen with no comment or explanation.)

Yes, I found the answer.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.