Remove border of font awesome icons with custom background color

Question

I use custom background color of font awesome icons but it also shows border around them Like this

I also heard about border-radius:50% but it does not remove the borders completely how can I remove these borders.

This is html code

body {
  background-color: lavender;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  opacity:0.9;
  background:#fff;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
<a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>

Answer 1

What you are seeing there is the background bleeding through - so attempting to address this issue with standard border rules will not yield the intended results.

Consider reducing the line-height of icons, as demonstrated in the embedded code snippet below.

Code Snippet Demonstration:

body {
  background-color: gray;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.fa.social { /* more specificity is required in your selector to over-qualify default fontawesome icon line-height */
  opacity:0.9;
  background:#fff;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  /* Additional */
  line-height: 39px;
  border-radius: 10px;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
<a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>

Summary:

1. Add more specificity to custom selectors to over-qualify default fontawesome icon line-height property value, e.g: .fa.social
2. Declare line-height property with value relative to font-size, e.g: line-height: 39px
3. Declare border-radius property rule to "clip-off" corner overflow, e.g: border-radius: 10px

Alternatively

Consider utilising stacked icons

Example:

<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-fb"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>

Code Snippet Demonstration:

body {
  background-color: gray;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  opacity:0.9;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-fb"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-tw"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-gp"></i>
  <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-ig"></i>
  <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>

Answer 2

That are no borders, that is just a white background. Just remove the background styling or make it transparent

.social {
    opacity:0.9;
    background: transparent;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

And if you want the white background for the icons, you can add an after element a white background and border radios, so it matches the icons.

body {
  background-color: lavender;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  position: relative;
  border-radius: 3px;
  opacity:0.9;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
.social:after{
  content: "";
  position: absolute;
  top: 4px;
  border-radius: 12px;
  left: 0;
  width: 100%;
  height: 86%;
  background: white;
  z-index: -1;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
<a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>

Answer 3

Remove white background from the .social and added with :before

body {
  background-color: lavender;
}
a {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
a:before {
  content: "";
  background: #fff;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 8px;
  left: 4px;
  display: block;
  border-radius: 9px;
  opacity:0.9;
}
a:hover:before {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  opacity:0.9;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook">
  <i class="fa fa-facebook-square fa-3x social social-fb"></i>
</a>
<a href="#" title="Twitter">
  <i class="fa fa-twitter-square fa-3x social social-tw"></i>
</a>
<a href="#" title="Google+">
  <i class="fa fa-google-plus-square fa-3x social social-gp"></i>
</a>
<a href="#" title="Instagram">
  <i class="fa fa-instagram fa-3x social social-ig"></i>
</a>