How do I increase the width of the image border inward rather than outward?
Simple problem. I have several buttons that use border-image. the image they use has large rounded corners, so the inner box where the content goes is always filled with loads of border. I want to make it so that the button adapts to the width of the text, but the text moves right to the edges. Basically, you need to close the large gap between the edge of the text and the border.
Here's an example of what I have and what I want to change:
.a {
display: inline-block;
border-style: solid;
border-width: 30px 30px;
border-image: url(http://qt-project.org/doc/qt-4.8/images/qml-borderimage-tiled.png) 30 30 fill round;
box-sizing: border-box;
}
<div class="a">
TEXT TEXT TEXT
</div>
So while it would look awful in this example, I want the edges of the text to touch the edges of the border image. I tried "box size: border-box"; but this only works for normal boundaries.
source to share
If you put TEXT TEXT TEXT
in <span>
in HTML , you can put it:
<div class="a">
<span>TEXT TEXT TEXT</span>
</div>
If you then add the following CSS , the text runs from the left border of the button to the right border:
.a span {
display:inline-block;
position:relative;
left:-10px;
margin-right:-20px;
}
Position left:
and margin-right:
are derived from an existing button border-width:
.
Basically:
-
left:-10px;
moves the left edge to the<span>
left by one third of the width of the30px
left border. -
margin-right:-20px;
moves the right edge<span>
to the right one-third of the width of the30px
right border, and also compensates for the left shift10px
declared in the rule above.
.a {
display: inline-block;
border-style: solid;
border-width: 30px 30px;
border-image: url(http://qt-project.org/doc/qt-4.8/images/qml-borderimage-tiled.png) 30 30 fill round;
box-sizing: border-box;
}
.a span {
display:inline-block;
position:relative;
left:-10px;
margin-right:-20px;
}
<div class="a">
<span>TEXT TEXT TEXT</span>
</div>
source to share