Div with gradient border but transparent background for text

Question

I have a div with some text, and I want to give it a gradient border but have the inside of the div transparent because there's a background image.

I tried modifying some existing code from examples I found, but I'm not quite there yet. Here are a couple of fiddles to show what I've got:

Example 1 This is actually pretty close, except the gradient should go from left to right instead of top to bottom. I tried changing the direction of the gradient, but unless I change the background-size to 100% the change doesn't show up, and if I change the size to 100% then the background repeats and I lose the transparent part.

Example 2 This is another alternative, and it appears I only need to add the bottom border, but I can't figure out exactly how to do it.

I'd appreciate if someone can take a look and give me some advice.

This is the CSS for example 1.

.box{
    border-top: 5px solid #c13041;
    border-bottom: 5px solid #bd9600;
    background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, from(#c13041), to(#bd9600));
    background-image: -webkit-linear-gradient(#c13041, #bd9600);
    background-image: -moz-linear-gradient(#c13041, #bd9600), -moz-linear-gradient(#c13041, #bd9600);
    background-image: -o-linear-gradient(#c13041, #bd9600), -o-linear-gradient(#c13041, #bd9600);
    background-image: linear-gradient(#c13041, #bd9600), linear-gradient(#c13041, #bd9600);
    background-size: 5px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}

And example 2.

    .box{
        border-left: 5px solid #c13041;
        border-right: 5px solid #bd9600;
        background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, from(#c13041), to(#bd9600)), -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
        background-image: -webkit-linear-gradient(to right, #c13041, #bd9600), -webkit-linear-gradient(180deg, #000, transparent), -webkit-linear-gradient(180deg, #000, transparent);
        background-image: -moz-linear-gradient(to right, #c13041, #bd9600), -moz-linear-gradient(to right, #c13041, #bd9600), -moz-linear-gradient(180deg, #000, transparent), -moz-linear-gradient(180deg, #000, transparent);
        background-image: -o-linear-gradient(to right, #c13041, #bd9600), -o-linear-gradient(to right, #c13041, #bd9600), -o-linear-gradient(180deg, #000, transparent), -o-linear-gradient(180deg, #000, transparent);
        background-image: linear-gradient(to right, #c13041, #bd9600), linear-gradient(to right, #c13041, #bd9600), linear-gradient(90deg, #000, transparent), linear-gradient(90deg, #000, transparent);
        background-size: 100% 5px;
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
}

Thanks in advance.

Answer 1

Your example no 1, corrected (only for modern syntax)

.box {
  width: 300px;
  padding: 40px 20px;
  border-left: 5px solid #c13041;
  border-right: 5px solid #bd9600;
  background-image: linear-gradient(90deg, #c13041, #bd9600), linear-gradient(90deg, #c13041, #bd9600);
  background-size: 100% 5px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

<div class="box">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

fiddle