Box with border and a title on top border

Question

Box with border and a title on top border

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Is there a custom style in the CSS or HTML tag where I get the effect as shown in the image below?

Itwouldbeaasidewithaborderof1pxandtheword"Realization" centered over the top border, but that the border below the text does not appear, as the image.

Is there anything in CSS or HTML that does this automatically?

Code I have:

/* estilos apenas como exemplo,
para mostrar o fundo preto e o texto centralizado*/
body{
   background: #000;
   color: #fff;
   text-align: center;
}

<aside class="realiza"> 
   <p>Realização:</p>
   Qualquer texto aqui
</aside>

html css

asked by anonymous 31.05.2018 / 22:41

2 answers

1

If it's an aside ...

body{
   background: #000;
   color: #fff;
}


.realiza{
  text-align: center;
  border: 1px solid #ddd;
  margin-top: 30px;
  position: relative;

  

}

.realiza div {
  width: 100%;
  position: absolute;
  line-height: 20px;
  height: 20px;
  top: -10px;
  left: 0;

}

.realiza div span{
   background: #000;
  padding: 0 15px;
  color:#fff;
}

<div class="div"><aside class="realiza">
   <div><span>Realização:</span></div>
   <p>Qualquer texto aqui</p>
</aside></div>

31.05.2018 / 23:59

Set div width containing parchment Using Grid with AbsoluteLayout - Xamarin Forms

score 1 · Accepted Answer

The <fieldset> tag allows you to create this box with outline around it , and the <legend> tag that is inside defines what appears at the top as "title."

See the example:

/* estilos apenas como exemplo,
para mostrar o fundo preto e o texto centralizado*/
body{
   background: #000;
   color: #fff;
   text-align: center;
}

<fieldset class="realiza"> 
   <legend>Realização:</legend>
   Qualquer texto aqui
</fieldset>