How to Hide the Background Underneath the Border

How to hide the background underneath the border

How about background-clip: padding-box;?

Demo

Transparent border to hidden background with CSS

Something like this?

Fiddle

li a:hover {
  color: #222;
  border-bottom: 1px solid transparent;

  /* Added styles */
  background-image: linear-gradient(white, white), url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-clip: content-box, padding-box;
  background-attachment: fixed;
}

Or do you want to show the image only to border-bottom?

Working Fiddle

How to hide border behind body?

remove extra margin from .home-panels and it is element body not class .body in CSS.

and you need to add

 .home-panels a:nth-child(odd) .panel-default {
  border-left: 0
}
.home-panels a:nth-child(even) .panel-default {
  border-right: 0
}

Note that I added box-sizing:border-box to the wildcard selector * so it will apply to every selectors.

*,*:before,*:after {  box-sizing: border-box;}body {  background-color: green;  margin: 0;}.home-panels {  font-size: 0;}.panel-default {  border-style: none;  position: relative;  width: 50%;  padding-bottom: 40%;  overflow: hidden;  background-color: #446CB3;  border-radius: 0;  display: inline-block;  margin-bottom: 0px;  border: 2.5px white solid;}.home-panels a:nth-child(odd) .panel-default {  border-left: 0}.home-panels a:nth-child(even) .panel-default {  border-right: 0}.panel-body {  color: white;  width: 100%;  height: 100%;  text-align: center;  position: absolute;  font-size: 12px;  justify-content: center;  align-items: center;  display: flex;}

<div class="home-panels">  <a href="/inspirations/25-asdf-asdf">    <div class="panel panel-default">      <div class="panel-body">        <div class="white-link">asdf asdf</div>      </div>    </div>  </a>  <a href="/inspirations/4-to-to-to-to-to-to-to-to-to-to-to-to">    <div class="panel panel-default">      <div class="panel-body">        <div class="white-link">to to to to to to to to to to to to</div>      </div>    </div>  </a>  <a href="/inspirations/24-asd">    <div class="panel panel-default">      <div class="panel-body">        <div class="white-link">test</div>      </div>    </div>  </a>  <a href="/inspirations/8-test">    <div class="panel panel-default">      <div class="panel-body">        <div class="white-link">test</div>      </div>    </div>  </a>
</div>

How to remove a border of background-image

Use the `src=""` attribute instead of `background-image`

That's the usual border of the Broken-Image asset that you get when you don't provide a valid src="" attribute and the image cannot be found.

A BAD solution is to use a 1x1 transparent pixel - or equally a base64 representation of the same:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

than it would look like:

body{  background-color: grey;}
.footer-red-bar{  width: 100%;  height: 180px;  margin: 0 auto;  margin-top: 2em;}
.footer-red-bar img{  width: 100%;  height: 180px;  background-size: cover;  background-position: center;  background-repeat: no-repeat;}

<div class="footer-red-bar">  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"        style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)"/></div>

Hide part of a border in CSS?

here's the sample of what you need:

Firs of all, you need a container div with your Background (i've grabbed one from internet for this example).

After this, you need to use and snippets from HTML.

Your CSS

div {
    padding: 30px;
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkAuRoZnkLBZlEYtgL5GJ5w_2Tufpxh5PqkOf-Negy7eL-JGC5Mk-DW-I) no-repeat  center center;
    background-size: cover;
}

fieldset {
    border: 2px solid black;
    padding: 10px;
}

Your HTML

<div>
 <fieldset>
  <legend>Personalia:</legend>
  <p>some text here</p>
 </fieldset>
</div>

Here you can see the Fiddle

Remove background outline on the side of the border after skew transform

To remove the red outlines and keep the animation, you can do this:

Remove the borders left and right from p:hover
Add some margin-left

div.labels p:hover {
  background: red !important;
  margin-left: 30px;
}
div.labels p {
  color: white;
  font-family: 'Bebas Neue';
  text-transform: uppercase;
  line-height: 0.8;
  transition: 0.4s ease all;
  font-size: 4rem;
  -webkit-text-stroke: 2px white;
  letter-spacing: 2px;
  width: fit-content;
  padding: 1rem 2rem;
  transform: skew(-10deg);
}

<div class="labels">
   <p>Very Funny</p>
</div>

How do I remove the gray border that surrounds background images?

So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.

I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.

If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?

Hiding/Showing border

Your solution is the right way to handle this problem.

Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.

I would use exactly the same method you have used.

How to Hide the Background Underneath the Border