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

Discussion in 'Web Development' started by GerarDant90, Sep 12, 2017.

  1. GerarDant90

    GerarDant90 New Member

    Joined:
    Sep 12, 2017
    Messages:
    2
    Likes Received:
    0
    How do I add a border radius to linear-gradient?

    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. RomieAnb90

    RomieAnb90 New Member

    Joined:
    Sep 12, 2017
    Messages:
    3
    Likes Received:
    0
    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 color.
    If you can describe the desired end result, perhaps a solution could be offered.
     

Share This Page