How to customize the side edges of a DIV?

Asked

Viewed 1,263 times

3

I have a <div> whose edge has a different customization than the pattern. It is not totally solid, it has "open spaces" at the top and bottom.

Example drawn:

inserir a descrição da imagem aqui

The central content varies, so the size of the <div> also varies.

What I’ve already tried:

  • I created 2 <div>, one underneath with a solid edge and the other on top with a white background, however, it was not practical;
  • I used pseudo-elements to allocate the border on the right and left, but also not cool because the size varies;
  • I used border-image, but it wasn’t good either.

Anyone has suggestions?

html css

  • But is this unbroken part occupied by a text? Is it a title of what you have inside the div? If yes, it uses background on the element h or p that will have the title and positions it using position, z-index and margin. But put the code there to make it easier. If you want to make it easier to help, put it on http://jsfiddle.net/

  • @Vítorandré yes, the box content varies. Sometimes it has a title at the top and a text in the middle, or sometimes it is 3 words listed. But the edge layout is this, with the central parts "blank". In fact there will be cases that only the top is blank, the rest the edge remains solid.

  • 1

    It is not like this example but by your comment does not want a fieldset?

  • Pow personal, I did not remember that. He does exactly what I want, thank you very much. I will test here using it then comment as it turned out. Thank you!

2 answers

8


Pseudo-elements are a quick and practical solution:

.borda {
  position:relative;
  float:left;
  padding:0 20px;       /* espaço nas laterais     */
  font-size:20px;
}

.borda:before,.borda:after {
  content:''; display:block;position:absolute;
  border:1px solid black;
  top:8px; bottom:8px; /* espaço no topo e embaixo */
  width:13px;          /* largura das "chaves"     */
}

.borda:before {
  left:2px; border-right:none;
}

.borda:after {
  right:2px; border-left:none;
}
<div class="borda">TEXTO</div>
<div class="borda">TEXTO<br>TEXTO<br><br>TEXTO<br>TEXTO<br><br>TEXTO</div>
<div class="borda">TEXTO<br>TEXTO<br>TEXTO<br>TEXTO</div>

  • 1

    It worked out! Thank you very much!

  • 1

    @Ricardo left us comments the key places for you to adjust the measures. I just did not comment the 2px in the end, in the left and right end. It can be 0, if you don’t need white space between different Ivs. I put those 2px not to paste the 3 tests of the example.

  • Yes @Bacco I used your code and adjusted to my site.. it was good. Thanks again the/

0

You can hide the edges using CSS.

	div{
	  border-style: solid;
	  border-bottom-style: none;
	  border-top-style: none;
	}

In the HTML document itself:

<style>
	div{
	  border-style: solid;
	  border-bottom-style: none;
	  border-top-style: none;
	}
</style>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.