How to customize the side borders of a DIV?

Question

How to customize the side borders of a DIV?

Navigation

#1 by (8 votes)
#2 by (0 votes)

3

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

Example drawn:

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

What I've already tried:

I created 2% with%, one bottom with solid border and the other with white background, but it was not practical;
I used pseudo-elements to allocate the border on the right and left, but it also was not cool because the size varies;
I used <div> , but it also did not look good.

Does anyone have a suggestion?

html css

asked by anonymous 19.04.2016 / 17:32

2 answers

0

You can hide the borders 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>

19.04.2016 / 18:05

How does copy objects work? How to group by weeks using sql?

score 8 · Accepted Answer

Pseudo-elements are a practical and quick 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>