Overflowing border with gradient background - css

Question

I have a block (container) with gradient as background color. The container have a border, and inside it, i have a text that I want to overflow part of a border and have the same background color. Now I have something like this:
But I want to achieve something like this:
To overflow some border area but still having the gradient background color, because if I add background color to the block of text, it still different from the gradient effect.
EDIT: I'd like to achieve something like this:

Answer 1

According to your JSFiddle code, I think the following code will help you.
.gradient-box {
background-image: linear-gradient(white, grey);
display: inline-block;
padding: 10px;
}
.container {
margin-top: 10px;
border: 3px solid black;
text-align: center;
display: inline-block;
padding: 10px;
}
.text {
margin-top:-20px;
}
.highlight {
background-color: #a9b0a9;
color: #429778;
}
<div class="gradient-box">
<div class="container">
<div class="text"> <span class="highlight"> TEXT </span></div>
</div>
</div>

Answer 2

You're wanting something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: #FBBFBF;
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: #FBBFBF;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #FBBFBF;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
EDIT: With transparent BG. Think this is only possible with square borders...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-image: linear-gradient(to right, red 0%, orange 100%);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
position: relative;
border-top: 0;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.top-border {
width: calc(100% - 100px);
height: 2px;
background-color: black;
position: absolute;
top: -1px;
left: -1px;
}
.top-border-end {
width: 20px;
height: 2px;
background-color: black;
position: absolute;
top: -1px;
right: -1px;
}
.float-text {
width: 80px;
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: transparent;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
text-align: center;
}
<div class="container">
<div class="top-border"></div>
<div class="float-text">
Text
</div>
<div class="top-border-end"></div>
</div>

Answer 3

I would do it like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: rgba(255,0,0,0.25);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: purple;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #fff2ac;
background-image: linear-gradient(to right, red 0%, orange 100%); /* maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
Edit
You mention a gradient, maybe you mean like this? (I added the gradient behind the the text box). If not - remove the background-image gradient if you just want solid colour.