Home/ Questions/Q 8823215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:17:50+00:00

I have a border in which I want to be a gradient for the

  • 0

I have a border in which I want to be a gradient for the top to create a light effect on the border. However it doesn’t work, I assume I have the code wrong for the border or I am missing properties that need to be defined.

Here is the CSS: 

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 25px;
background:#f2f2f2;
border: 5px solid #b30005;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-o-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-webkit-border-radius:25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius:25px;
/*    border-top:  25px solid #b30005; */

border-top:  25px solid rgb(179,0,5); /* Old browsers */
border-top:  25px solid url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2IzMDAwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); /*IE 9 */
border-top:  25px solid -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(179,0,5,1) 10%); /* FF3.6+ */
border-top:  25px solid -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(10%,rgba(179,0,5,1))); /* Chrome,Safari4+ */
border-top:  25px solid -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* Chrome10+,Safari5.1+ */
border-top:  25px solid: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* Opera 11.10+ */
border-top:  25px solid: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* IE10+ */
border-top:  25px solid linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* W3C */
z-index:3;

Here is a fiddle I created.

How to I create a gradient for only the top border that works cross browser? (Note: I am only worried about IE 9+ I will use a solid color for IE8 and below.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s are a couple solutions to work with, via CSS-Tricks.

    It appears that you can use border-image to set a linear gradient. For instance, for a bottom-to-top border:

    .bottom-to-top {
  border-width:3px;
  -webkit-border-image: 
    -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image:
    -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;    
}
    • 0