Horizontal gradient gradient

Question

This may seem trivial, but I cannot find the answer anywhere. I am trying to change the border to a gradient fill on hover.

Here is the codepen; https://codepen.io/gavdraws/pen/LyWJML

As you will see, the vertical borders on each side work as intended, while the horizontal borders do not.

EDIT: I cleaned up the mess and created a violin; https://jsfiddle.net/6dwx4eos/

All help is appreciated.

For clarification:

/* Working */
.frame.leftFrame {
  top: 0px;
  left: 0px;
  border-left: 45px solid #EDEDED;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  height: 100%;
  box-sizing: border-box;
}

.frame.leftFrame:hover{
  border-left: 45px solid #F1612F;
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22); /* For Safari 5.1 to 6.0 */
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(bottom, #f26739, #f68a22) 1 100%;  
  -o-border-image:
    -o-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  border-image:
     linear-gradient(to bottom, #f26739, #f68a22) 1 100%;
  cursor: pointer;
}

/* Not Working */
.frame.topFrame {
  top: 0px;
  left: 0px;
  border-top: 45px solid #EDEDED;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0px;
  width: 100%;
  box-sizing: border-box;
}

.frame.topFrame:hover{
  border-top: 45px solid #F1612F;
  content: "";
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22); /* For Safari 5.1 to 6.0 */
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(bottom, #f26739, #f68a22) 1 100%;  
  -o-border-image:
    -o-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  border-image:
  linear-gradient(to bottom, #f26739, #f68a22) 1 100%;
  cursor: pointer;
}

Answer 1

.frame.topFrame:hover bottom left right, . , 45 , , .