taeyong taeyong - 4 months ago 17
CSS Question

How to make this image a border?

I'm making a pop-up box, and I designed a custom border for it but I'm having trouble figuring out how to insert it into the code correctly.

Here is the code for the box:


.popup_block{
display: none; /*--hidden by default--*/
background: #ffffff;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}`

<div id="02" class="popup_block">

<Center> text goes here
</center></div>


And here is the border I made: border
Is there a way for me to place it on top of the pop up box or something? The inside is transparent so placing it overtop would work, I think. Unless there's an easier way.

Answer

You can also use border-image and eventually position fixed from a wrapper.

#poplayer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* might be usefull too
  z-index: XX;
  overflow:auto;  
  */
}
#popup {
  min-width: 450px;
  min-height: 150px;
  border-style: solid; 
  border-width: 47px 34px 32px 39px; 
  -moz-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
  -webkit-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
  -o-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat;
  border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 fill repeat;
}
<div id="poplayer">
  <div id="popup">
    whatever comes inside your popup
  </div>
</div>