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

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

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

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

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

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

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

User · Answer

Text in Border with transparent text background  x000D   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   lt div class  box  gt       lt div class  first  gt           lt span class  foo  gt FOO lt  span gt           lt span class  bar  gt BAR lt  span gt       lt  div gt       lt br gt        lt div class  second  gt           lt span class  foo  gt FOO lt  span gt           lt span class  bar  gt BAR lt  span gt       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

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

[html] Text in Border CSS HTML

Examples related to html

Examples related to css