I'd like to have a simple div without any nested elements
<div class="border">čištění</div>
displaying horizontal dashed border inside the element (like within padding), like this
There is a outline-offset property, but it accepts only a single length value and vertical borders also appear. Is there any elegant solution?
In the suggested answer I can not see how to hide the vertical borders.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.border {
display: flex;
align-items: center;
justify-content: center;
outline: 5px solid green;
outline-offset: -5px;
border-top: 10px dashed #fff;
border-bottom: 10px dashed #fff;
background-color: green;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="border">čištění</div>
</body>
</html>My own approach would be to use background-image and repeating-linear-gradient():
/* caching CSS custom properties in the :root element,
for use throughout the page, and allowing for easy
theming: */
:root {
--color-primary: #fff;
}
/* a simple reset to remove default padding and margins
and to force the browser to use the same border-box
sizing algorithm for all elements and the listed
pseudo-elements: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.border {
/* defining the '--size' property on the .border element: */
--size: 0.3em;
/* defining the repeating-linear-gradient as a custom property,
as it will be used twice; here we specify the gradient should
be at a 90 degree angle (on the horizontal axis),
should start with the currentColor (the assigned color of the
element), and cover a distance from 0 to the result of multiplying
the --size by 2, then the gradient will take a transparent color
from the distance of --size * 2 to the distance of --size by 3.
This is in order to have the gradient scale along with the font-
size: */
--gradient: repeating-linear-gradient(90deg, currentColor 0 calc(2 * var(--size)), transparent calc(2 * var(--size)) calc(3 * var(--size)));
/* setting the background-color: */
background-color: darkgreen;
/* assigning the background-images: */
background-image: var(--gradient), var(--gradient);
/* we don't need to repeat the gradient (although 'repeat-x' would
have the same result): */
background-repeat: no-repeat;
/* here we assign the first background-image to be positioned at 0 (x-axis)
and --size (y-axis) from the top-left corner, and the second to be
positioned at 0 (x-axis) and the result of 100% - the --size property
to inset the background-image from the lower edge of the element: */
background-position: 0 var(--size), 0 calc(100% - var(--size));
/* the background-size is 100% in the x-axis and half of the --size
custom-property on the y-axis: */
background-size: 100% calc(0.5 * var(--size));
/* sizing the element on the inline-axis (equivalent to width in the
English language): */
inline-size: 50vw;
margin-block: 1em;
margin-inline: auto;
padding-block: 1em;
/* assigning the --color-primary custom property as the color: */
color: var(--color-primary);
text-align: center;
font-size: 2em;
}<div class="border">čištění</div>References:
.border {
width: 200px;
height: 50px;
background: #00483d;
display: flex;
justify-content: center;
align-items: center;
padding: .2rem;
position: relative;
color: white;
}
.border::before {
content: "";
border-top: 2px dashed white;
width: 92%;
height: 100%;
position: absolute;
top: 4px;
}
.border::after {
content: "";
border-bottom: 2px dashed white;
width: 93%;
height: 100%;
position: absolute;
bottom: 4px;
}<div class="border">čištění</div>div {
height: 100px;
width: 300px;
background-color: lime;
line-height: 100px;
text-align: center;
border-top: 4px dashed white;
border-bottom: 4px dashed white;
outline: 10px solid lime;
}