Gibson Gibson - 5 months ago 23
CSS Question

How to make irregular CSS border

I'm trying to do this with CSS:

enter image description here

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:

enter image description here

I'm actually absolute positioning a div inside another:

<div class="main-div">
<div class="main-div-overlay-text">
SOME TEXT
</div>
SOME TEXT HERE
</div>

.main-div {
position: relative;
width: 200px;
height: 150px;
border: 2px solid white;
}

.main-div-overlay-text {
position: absolute;
left: 0;
right: 0;
margin: auto;
top:-10px;
}

Answer

Try using <fieldset> and <legend>.

body {
  background: grey;
}
fieldset {
  border: 1px solid white;
  color: white;
  text-align: center;
  width: 200px;
}
legend {
  padding: 0 10px;
}
<fieldset>
  <legend>Title</legend>
  <p>Text</p>
</fieldset>

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

Comments