0

I'd like to make border-top css rule for element with gradient from top to bottom. I'm using this code:

border-top: 15px solid transparent; border-image: linear-gradient(to top, #0a2028, #104359) 1;

or this:

border-image: linear-gradient(180deg, #0a2028, #104359) 1;

but this wont work.

I want to achieve something like using by this one:

background: linear-gradient(180deg, #225763, #062532);
T02my
  • 1

2 Answers2

0

Add this to your code:

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

And the css:

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 5px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to bottom, #743ad5, #d53a9d);
}

Here is the example you can try

batgerel.e
  • 837
  • 1
  • 10
  • 31
0

Check this solution 

<html>
    <head>
        <style>
            button {
                background: none;
                text-decoration: inherit;
                font-family: system-ui;
                font-size: 1rem;
                padding: 1rem 2rem;
            }

            .border-gradient {
                border: 10px solid;
                border-image-slice: 1;
                border-width: 5px;
            }

            .border-gradient-purple {
                border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
            }

            .border-gradient-green {
                border-image-source: linear-gradient(to left, #00C853, #B2FF59);
            }

            body {
                height: 100vh;
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            body > div {
                width: 100%;
                text-align: center;
            }
            body > div > div {
                width: 100%;
                padding: 1rem;
            }

            .on-dark {
                background: #222;
            }
            .on-dark button {
                color: white;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="on-light">
                <button class="border-gradient border-gradient-purple">
                    I have a gradient
                </button>
            </div>
            <div class="on-dark">
                <button class="border-gradient border-gradient-purple">
                    I have a gradient
                </button>
            </div>
            <div class="on-light">
                <button class="border-gradient border-gradient-green">
                    I have a gradient
                </button>
            </div>
            <div class="on-dark">
                <button class="border-gradient border-gradient-green">
                    I have a gradient
                </button>
            </div>
        </div>
    </body>
</html>
Vivek Tarsariya
  • 127
  • 9