CSS3 implements the current border

(1) A gradient bottom edge 
border-image: -webkit-linear-gradient(right, #FF9848,#FF2A2B) 1 1; 
border-image: -o-linear-gradient(right, #FF9848,#FF2A2B) 1 1; 
border-image: linear-gradient(to right, #FF9848,#FF2A2B) 1 1; 
border-image-slice:0 0 100% 0;//The lower border 

(2) a gradient border with a picture

1. border-image-source:url(../img/border_img.png);  
2. border-image-slice:0 0 100% 0;  
3. border-image-width:0.05rem;  
4. border-image-repeat:repeat;
5. write together

         border-image:url(../img/border_img.png) 0 0 100%/0.05rem 0 repeat;

       6. If you want this single frame to be on the top, you can only modify it 

1. border-image-slice:100% 0 0 0;