Gibson Gibson - 1 year ago 141
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">

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

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

Answer Source

Try using <fieldset> and <legend>.

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

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