Text in Border CSS HTML

Question

I d like to have a div that looks like this     Is this possible to do with HTML   CSS  I will also be animating this div with jQuery  When the div is hidden I would like the title and the top line to show

User · Answer

x000D   x000D   lt fieldset gt  x000D     lt legend gt  YOUR TITLE  lt  legend gt  x000D     x000D     x000D     lt p gt  x000D    Lorem ipsum dolor sit amet  est et illum reformidans  at lorem propriae mei  Qui legere commodo mediocritatem no  Diam consetetur  x000D     lt  p gt  x000D   lt  fieldset gt  x000D   x000D   x000D

User · Answer

Yes  but it s not a div  it s a fieldset  x000D   x000D  fieldset       border  1px solid  000    x000D   lt fieldset gt     lt legend gt AAA lt  legend gt   lt  fieldset gt  x000D   x000D   x000D

User · Answer

It is possible by using the legend tag  Refer to http   www w3schools com html5 tag legend asp

User · Answer

For a duplicate  here another option  with transform  no fieldset   and rounded  border required in the duplicates     position or transform can help you too      x000D   x000D        margin  0    padding 0    box-sizing border-box      fieldset     border  solid    color   353fff    border-radius  1em    margin  2em 1em 1em    padding 0 1em 1em      legend     transform  translatey -50      width  max-content    background  white    padding  0 0 15em      fieldset li     list-style-type    -      x000D   lt div class  fieldset  gt     lt h1 class  legend  gt Some Title lt  h1 gt     lt ul gt       lt li gt Item lt  li gt       lt li gt Item lt  li gt       lt li gt Item lt  li gt       lt li gt Item lt  li gt     lt  ul gt   lt  div gt  x000D   x000D   x000D

User · Answer

I know a bit late to the party  however I feel the answers could do with some more investigation input  I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I m not in a form then that isn t really what I should be doing   x000D   x000D     Styles go here      info-block section       border  2px solid black      file-marker  gt  div       padding  0 3px      height  100px      margin-top  -0 8em          box-title       background  white none repeat scroll 0 0      display  inline-block      padding  0 2px      margin-left  8em    x000D   lt aside id  info-block  gt     lt section class  file-marker  gt       lt div gt         lt div class  box-title  gt          Audit Trail        lt  div gt         lt div class  box-contents  gt           lt div id  audit-trail  gt           lt  div gt         lt  div gt       lt  div gt     lt  section gt   lt  aside gt  x000D   x000D   x000D   This can be viewed in this plunk  Outline box with title What this achieves is the following   no use of fieldsets   minimal use if CSS to create effect with just some paddings   Use of  quot em quot  margin top to create font relative title   use of display inline-block to achieve natural width around the text    Anyway I hope that helps future stylers  you never know

User · Answer

You can use a fieldset tag    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   x000D   lt form gt  x000D    lt fieldset gt  x000D     lt legend gt Personalia  lt  legend gt  x000D    Name   lt input type  text  gt  lt br gt  x000D    Email   lt input type  text  gt  lt br gt  x000D    Date of birth   lt input type  text  gt  x000D    lt  fieldset gt  x000D   lt  form gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Check this link  HTML  Tag

User · Answer

Text in Border with transparent text background

_x000D_

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: #333;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: #333;
    display: block;
    height: 50%;
}

_x000D_

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

_x000D_

User · Answer

You can do something like this  where you set a negative margin on the h1  or whatever header you are using   div      height 100px      width 100px      border 2px solid black     h1      width 30px      margin-top -10px      margin-left 5px      background white      Note  you need to set a background as well as a width on the h1  Example  http   jsfiddle net ZgEMM     EDIT  To make it work with hiding the div  you could use some jQuery like this     a   click function        var a      h1   detach           div   hide          a  prependTo  body               You will need to modify      Example  2  http   jsfiddle net ZgEMM 4

[html] Text in Border CSS HTML

The answer is

Text in Border with transparent text background

Examples related to html

Examples related to css

Tags