Search code examples
cssborderoutline

CSS border/outline who goes on top of a line of text

can somebody please advice me how to achieve borders/outline like on image i'm attaching. I have tried many thing but still no success.

enter image description here

Solution

  • You can accomplish that by using a negative margin on the header.

    Not my choice of design, but possible it is.

    * { margin: 0; padding: 0; }
body {
  padding: 1em;
}
div {
  padding: 1em;
  border: 1px solid black;
}
h3 {
  margin-top: -1.5em;
  margin-bottom: 1em;
  border-bottom: 1px solid black;
}
p {
  border-left: 1px solid black;
}
    <div>
  <h3>Chapter</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales velit non ligula dictum, vitae sagittis diam maximus. Vivamus finibus, nibh sed fringilla accumsan, mi neque convallis lorem, et viverra quam libero vel risus. Maecenas varius blandit dui, et suscipit massa sodales tincidunt. Donec at dui blandit, sollicitudin elit nec, tincidunt dui. Aenean facilisis tellus et velit mollis, nec efficitur lacus volutpat. Proin dapibus odio sem, fringilla ullamcorper tellus porta eget. Nunc sed egestas enim, eget gravida urna.</p>
</div>