How do I add a border radius to linear-gradient?

HTML & CSS
1

Code


.window2 {
  display: table;
  width: 100px;
  height: 100px;
  background: #000;
  border-radius: 50%;
  border: 25px solid transparent;
  border-image: linear-gradient(to right, red ,  red );
  border-image-slice: 1;
  position: relative;
}

.tcell2 {
  display: table-cell;
  padding: 18%;
  vertical-align: middle;
  text-align: center;
  font-family: New Times Roman;
  font-size: 18px;
  color: red;
  )
}

.windowframe2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://i.imgur.com/4HJbzEq.png);
  background-size: cover;
}


<div class="window2" style="">
  <p class="tcell2" style="">Example Text</p>
  <div class="windowframe2" style=""></div>
</div>
2

A border image will overlay, appearing to override round corners.
In this case I don’t see the purpose of the gradient, as it is all one colour.
If you can describe the desired end result, perhaps a solution could be offered.

3

I found this but I’m confused on how to implement it.

4

Well the code is there for you to see. :eyes:
Note they are not using a border-image anywhere.

5

Background doesn’t work though, how do I fix it? So it looks like border image?

Background

VS.

Border image:

6

Hi there asasass,

I won’t try and answer your problem as
my efforts are usually ignored, but…

I would like to point out that your window,
from a builder’s point of view, is actually
1° off plumb. :wonky:

Here is you image realigned…

I apologise for any discomfort that this
revelation may bring. :winky:

coothead

3 Likes
7

Study the example you posted. They are using a pseudo element (::after) to create the illusion of a border, with the actual element having a different background.

8

What I’m asking is, how do I get background, to have text in the middle with black background?

Border Image

Background

9

I stripped that out completely and there’s still a border radius.

10

Got it and done.

[Background: Linear-Gradient]

<style>
  .window4 {
  display: table;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 25px solid white;
  position: relative;

}

.tcell4 {
  display: table-cell;
  padding: 0px;
  /* increased to fit width of round window image better.  Adjust as needed. */
  vertical-align: middle;
  text-align: center;
  font-family: New Times Roman;
  font-size: 18px;
  color: #32cdce;
  background: linear-gradient(to right, black ,  black );

}

.windowframe4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://i.imgur.com/4HJbzEq.png);
  background-size: cover;
}
</style>

<div class="window4" style="">
  <p class="tcell4" style="">Example Text</p>
  <div class="windowframe4" style=""></div>
</div>
11

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