Weird Effect When Applying Transparent Border Over an Element with a Gradient Background

Weird effect when applying transparent border over an element with a gradient background

That's because the starting and ending points of the gradient are at the edges of the padding-box and border is rendered outside the padding-box. So, the borders look funny because the background is repeated on each side outside the padding-box to cover the border-box.

The box-shadow:inset is rendered inside the padding-box (just like background) and gives visually the same effect as a border, so you could try using that in place of border:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

Because a box-shadow doesn't take up any space, you need to increase your padding accordingly.

Illustration of padding-box and border-box:
Sample Image

Demo http://jsfiddle.net/ilpo/fzndodgx/5/

Gaps of dashed borders with gradient background

The background-clip CSS property with value padding-box can be used to get the second result. Using background-clip: border-box along with background-repeat: no-repeat I was able to get a single color under the border, but not the actual gradient.

CSS linear-gradient with semi-transparent borders

You can choose which of the boxes is used as a reference for the background

Choose border-box and it will work as desired

You can choose between border content and padding box

.box {    box-sizing: border-box;    height: 100px;    width: 100px;    border: 25px solid rgba(0,0,0,0.1);    background-color: #eee;    margin-bottom: 20px;    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);       background-origin: border-box;  /* the trick */}

<div class="box"></div>

Why background color hides border?

Add this inside your help_button css->

-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */

Or you can use box-shadow ->

border: none;
box-shadow: 0px 0px 0px 10px rgba(243, 147, 37, 0.4);

Table with gradient borders and cell gradient borders

Solution

You can actually achieve what you want without border-image property just by setting the following:

table {
  background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */
  background-origin: border-box; /* set background to start from border-box */
  border-spacing: 5px; /* space between each cell */
  border: 5px solid transparent; /* optional */
}

Browser Support:

Background Image property also has much better browser support than Border Image.

Explanation

In essence what we are doing here is the following:

Add the linear-gradient as the background of the table.
Set the origin of the background such that it starts from the border-box of the table. (For more details on background-origin, please refer my answer here).
Separate the border between the table cells & rows (default setting) such that the background of the table is visible through the space in between.
Add an extra transparent border to your table itself. This is optional and is only required because the table border in your image seems thicker than the border between the cells.

table {  background-image: linear-gradient(to bottom, red 0%, blue 100%);  /* the gradient */  background-origin: border-box;  /* set background to start from border-box */  border-spacing: 5px;  /* space between each cell */  border: 5px solid transparent;  /* optional */}body {  background-color: #eee;}
/* Just for demo */
table {  width: 500px;}td {  background: white; /* if not set cell would also be transparent and show the gradient */}

<!-- prefix free lib for older browsers --><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table class="tablagradiente" align="center" width="41%">  <tr>    <td><p>Sesiones Ordinarias</p></td>    <td><p>Sesiones Extraordinarias</p></td>  </tr>  <tr>    <td><p> </p></td>    <td><p>Primera Sesión Extraordinaria 2015</p></td>  </tr>  <tr>    <td><p> </p></td>    <td><p>Primera Sesión Extraordinaria 2015</p></td>  </tr>  <tr>    <td><p> </p></td>    <td><p>Primera Sesión Extraordinaria 2015</p></td>  </tr></table>

Weird Effect When Applying Transparent Border Over an Element with a Gradient Background