Create "border" in div that does not pass through text

Asked

Viewed 56 times

1

I put the edge in quotation mark, because I don’t know if it’s really edge the name of it.

I’d like to make that:

inserir a descrição da imagem aqui

Stay that way:

inserir a descrição da imagem aqui

In the case with the border passing through the text, without getting over.

How can I do this using css?

HTML:

<div class="divICMS"><h6>ICMS</h6>
            @(Html.DevExtreme().Form<FederacaoViewModel>()
        .ID("formularioCadastro2")
                            .ShowValidationSummary(false)
                            .Items(items =>
                            {
                                items.AddGroup()
                                    .Items(groupItems =>
                                    {
                                groupItems.AddSimpleFor(m => m.UF_AliqInterEstadual).CssClass("fedEstadual")
                                .Editor(e => e.NumberBox().Width("70px").ID("fedEstadual"));
                                groupItems.AddSimpleFor(m => m.UF_AliqInterna).CssClass("fedInterna")
                                .Editor(e => e.NumberBox().Width("70px").ID("fedInterna"));
                                groupItems.AddSimpleFor(m => m.UF_AliqFCP).CssClass("fedFCP")
                                .Editor(e => e.NumberBox().Width("70px").ID("fedFCP"));
                            });
                                items.AddSimpleFor(m => m.UF_CalcularFCP).CssClass("fedCalFCP")
                                .Label(l => l.Visible(false))
                                .Editor(editor => editor.CheckBox().Text("Calcular Fundo de Combate à Pobreza"));
    })
    .FormData(Model)
            )

                </div >

CSS:

.divICMS
{
border: solid 0.01em;
padding: 6px;
height: 175px;
width: 335px;
position: absolute;
top: 130px;
text-align: start;
}

1 answer

1


You can use fieldset and legend and set the border normally, as in the example below, I used the padding just to make it more "cute".

.conteudo{
  padding: 20px;
}
fieldset {
    border: 1px solid #000;
    padding: 20px;
}
<div class="conteudo">
  <fieldset>
    <legend>Lorem Ipsum</legend>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </fieldset>
</div>

Source

Browser other questions tagged

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