Проблема заключается в том, что после добавления градиента для блока .logo перестал работать border-radius. Выручайте)
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:300,400,500,700');
a.logo {
font-family: 'Fira Sans Condensed', sans-serif;
font-weight: 400;
font-size: 25px;
}
.logo {
padding: 6px 20px 5px;
margin-top: 0.65em;
border: 0.115em solid transparent;
display: inline-block;
/* border */
-moz-border-image: -moz-linear-gradient(90deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
-webkit-border-image: -webkit-linear-gradient(90deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
border-image: linear-gradient(90deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
border-image-slice: 1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/* text */
background: -webkit-linear-gradient(360deg, rgba(179, 0, 255, 0.9556197478991597) 30%, rgba(42, 198, 231, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<a class="logo">ЛОГОТИП</a>
border-image
+border-radius
= не совместимы!