Question 193660 in CSS Question posted in
Some basic documentation can be found here.

Css – How to create border color gradient?

I need to create a border color gradient, but doesn’t effect color in content inside.

<div className="parent background red">
   <div className="box">
      <div className="content">
        Happy coding
      </div>
   </div>
</div>

//css
.parent{
  background: red;
}
.box {
  position: relative;
  border-image: linear-gradient(#f6b73c, #4d9f0c) 1;
  border-width: 1px;
  border-style: solid;
  border-radius: 15px;
}

.content {
  background: transparent;
}

I want border gradiant color and have radius and doesn’t effect color inside content

Tags:

2

Answers


  1. 0

    To create a border color gradient without affecting the content inside, you can use the CSS border-image property along with a linear gradient. Here’s an updated version of your code with the necessary changes:

      <div class="parent background red">
     <div class="box">
        <div class="content">
          Happy coding
        </div>
     </div>
  </div>
  
  <style>
  .parent {
    background: red;
  }
  
  .box {
    position: relative;
    border-image: linear-gradient(to right, #f6b73c, #4d9f0c) 1;
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
  }
  
  .content {
    background: transparent;
  }
  </style>

    In the CSS code, the border-image property is used to define the gradient for the border. The linear-gradient function specifies the colors for the gradient, in this case, from #f6b73c to #4d9f0c. The to right parameter ensures the gradient is applied horizontally. The 1 value after the gradient specifies the border width.

    By keeping the content background as transparent (background: transparent;), the gradient will only affect the border, leaving the content inside unaffected.

    Login or Signup to reply.
  2. 0

    To achieve a border color gradient without affecting the color inside the content, you can use the ::before pseudo-element to create the gradient border effect.

    HTML:

    <div class="parent">
   <div class="box">
      <div class="content">
         Happy coding
      </div>
   </div>
</div>

    CSS:

    .parent {
   background: red;
}

.box {
   position: relative;
   border-radius: 15px;
}

.box::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   border-radius: 15px;
   border: 1px solid;
   border-image: linear-gradient(to right, #f6b73c, #4d9f0c) 1;
}

.content {
   background: transparent;
}
    • The .parent class remains the same.
    • The .box class is modified to remove the border-image property and instead it acts as a container for the content and the ::before pseudo-element.
    • The ::before pseudo-element is added to create the border gradient effect. It is positioned absolutely to cover the entire area of the .box element.
    • The z-index property is set to -1 to position the ::before
      pseudo-element behind the .content element.
    • The border-radius property is applied to both the .box element and the ::before pseudo-element to maintain rounded corners.
    • The border property is set to 1px solid to define the border style.
    • The border-image property is used to apply a linear gradient from left to right with colors #f6b73c and #4d9f0c.
    • The .content class remains the same. With these changes, the .box element will have a gradient border while the content inside the .content element remains unaffected.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search