Board Thread:Support Requests - Getting Technical/@comment-31402001-20140208162934/@comment-4018164-20140208171654

The border-image property can use graient values, as you can see here, though its IE support is very poor (only IE11). Either use this, or if you want something more supported, perhaps making your content follow and be followed by 2 divs with gradients: <div style="height: 2px; margin-bottom: 4px; background: #ffd500; background: -moz-linear-gradient(left, #ffd500 0%, rgba(0,0,0,0) 50%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffd500), color-stop(50%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -o-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -ms-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: linear-gradient(to right, #ffd500 0%,rgba(0,0,0,0) 50%);"> CONTENT GOES HERE <div style="height: 2px; margin-top: 4px; background: #ffd500; background: -moz-linear-gradient(left, #ffd500 0%, rgba(0,0,0,0) 50%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffd500), color-stop(50%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -o-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -ms-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: linear-gradient(to right, #ffd500 0%,rgba(0,0,0,0) 50%);"> Which would give: <div style="height: 2px; margin-bottom: 4px; background: #ffd500; background: -moz-linear-gradient(left, #ffd500 0%, rgba(0,0,0,0) 50%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffd500), color-stop(50%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -o-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -ms-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: linear-gradient(to right, #ffd500 0%,rgba(0,0,0,0) 50%);"> CONTENT GOES HERE <div style="height: 2px; margin-top: 4px; background: #ffd500; background: -moz-linear-gradient(left, #ffd500 0%, rgba(0,0,0,0) 50%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffd500), color-stop(50%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -o-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: -ms-linear-gradient(left, #ffd500 0%,rgba(0,0,0,0) 50%); background: linear-gradient(to right, #ffd500 0%,rgba(0,0,0,0) 50%);"> About the first example (of border-image), there are some examples here.