Is there a way to make the left border fill all the space (without the inner gap)?

user_3684790 0
Viewed 205

I'm trying to style the heading of a page with the CSS border property, using the following code:

h2 {
    display: inline-block;
    margin: 5px 0 5px 0;
    padding: 0 0 0 5px;
    background-color: #eee;
    border-color: #aaa;
    color: #000;
    border-style: dotted dotted dotted solid;
    border-width: 1px 1px 1px 5px;
}

The result is

enter image description here,

which Is ok, but the left border has "pointy" tips, with gaps (what looks like a kind of "provision" for a, in this case, non-existent similar border), like in the image below

left border with pointy tips, showing gap up-close

Is there a way to get "square" tips for the left border?

border css
1 Answers

No you can't with a native border. But you can fake it using a :before element:

h2 {
  position: relative; /* make title relative */
  display: inline-block;
  margin: 5px 0 5px 0;
  padding: 0 0 0 5px;
  background-color: #eee;
  border-color: #aaa;
  color: #000;
  border-style: dotted dotted dotted solid;
  border-width: 1px 1px 1px 5px;
}

h2:before {
  content: "";
  position: absolute;
  height: calc(100% + 2px); /* 2px is the addition of the border-bottom (1px) and the border-top (1px) */
  width: 5px; /* same size than the border-left */
  background-color: #aaa;
  left: -5px;
  top: -1px; /* size of the border-top */
}
<h2>A title</h2>

user_85836690
Related