How To Make Irregular Css Border

I'm trying to do this with CSS: It's easy to do with a white background, but how can I do this layout if it has a background image? This is what I mean: I'm actually absolute pos

Solution 1:

Try using <fieldset> and <legend>.

body {
  background: grey;
}
fieldset {
  border: 1px solid white;
  color: white;
  text-align: center;
  width: 200px;
}
legend {
  padding: 010px;
}

<fieldset><legend>Title</legend><p>Text</p></fieldset>

To center the legend in Firefox, please use <legend align="center">