button element with border 1 px away from the real end - html

Question

Quick and simple question,
is there a quick way to change on a button, the distance from the borders edge to the "real" edge of the element.
I dont want to get the border further away, i want that the background is spread 1 or 2 px more over the edge of the border.
Google does not show me the right solution or I'm searching with wrong terms, hope some of you can help me.
Since my question is not clear, here is an picture of what try to achieve
https://picload.org/view/rpogroor/test.png.html

Answer 1

What you need to use over here is the pseudo element. The trick is to have a normal button but not to use a border on that. Insted, use an :after pseudo element and using CSS positioning, we can simulate the effect you want, that is, the background spreads beyond the dashed border.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
button {
-webkit-appearance: none;
background: #ede032;
padding: 10px 20px;
border-radius: 20px;
border: 0;
position: relative;
margin: 40px;
}
button:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
border: 1px dashed #515151;
border-radius: 20px;
}
<button>Hello There</button>
Here, the code is pretty self explanatory. I am having a simple button, where am setting some basic styles like background, border-radius and so on. Later, am having an :after pseudo where I use the dashed border which then I overlay over the button using CSS Positioning.

Answer 2

Your question is un-clear. What do you mean by
from an borders edge to the "real" edge of the element.
Are you trying to not display the border? If that's the case then you can always set the border to have a transparent color which would not show the border.

Answer 3

You can add padding to the button to increase space between its contents and the edge of the button.
Is this what you want?
padding:5px 10px ;
This means that the : Top and bottom padding are 5px.
Right and left padding are 10px.
By default a button has padding : 1px 6px; So to increase it by 1 or 2 pixels, just use appropriate values.
.spaced-out {
padding: 5px 10px;
}
<button>Hello</button>
<br><br>
<button class="spaced-out">Hello</button>

Answer 4

You want box-sizing:border-box.
This will ensure that, no matter the border-width, the element will be the same size. I assume this is what you want although the question is not very clear what you're looking for.
Notice the difference between the boxes with borders:
.flex-cont {
display: flex;
width: 100%;
height: 300px;
align-items: center;
justify-content: center;
}
.flex-item {
margin: 10px;
height: 200px;
background: blue;
flex: 1;
border: solid 20px green;
}
span {
display: block;
position: relative;
top: 45%;
text-align: center;
width: 100%;
}
.one {
box-sizing: content-box;
}
.two {
border: none;
}
.three {
box-sizing: border-box;
}
<div class="flex-cont">
<div class="flex-item one"><span>box-sizing: content-box</span></div>
<div class="flex-item two"><span>No border</span></div>
<div class="flex-item three"><span>box-sizing: border-box</span></div>
</div>
Here is a new JS fiddle based on your edit.
New JS Fiddle