Home > other >  Horizontal borders with padding
Horizontal borders with padding

Time:08-18

I'd like to have a simple div without any nested elements

<div >čištění</div>

displaying horizontal dashed border inside the element (like within padding), like this

enter image description here

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.

CodePudding user response:

<!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 >čištění</div>
  </body>
</html>

CodePudding user response:

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 >čištění</div>

JS Fiddle demo.

References:

CodePudding user response:

http://kod.djpw.cz/prgd

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;

}

CodePudding user response:

.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 >čištění</div>

  •  Tags:  
  • css
  • Related