title: Border Image Bootstrap
body: <p>I am trying to use an iphone frame png as a border on a form, but cannot figure it out. Below is .html and .css to this point. As you will see I have tried with the video as a background image and as a separate object.</p>
  
  <p>Here is the frame we are trying to use:
  <a href="https://i.stack.imgur.com/pY82X.png" rel="nofollow noreferrer">iPhone Frame</a></p>
  
  <p>Here is how we have it now (it is the form on the right w/in the jumbotron):
  <a href="https://i.stack.imgur.com/kSyDu.png" rel="nofollow noreferrer">Form Screenshot</a></p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #phoneform {
        float: right;
        border-image: url(/assets/images/iphone-frame-white.png);
        border: 10px solid transparent;
        padding: 25px;
      }
      #iphoneframe {
        background-repeat: none;
      }
      
      #landform {
        background: white;
        width: 360px;
        padding: 40px;
        text-align: center;
        margin-top: 105px;
        margin-left: 15px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
   &lt;!-- Signup Form --&gt;
        &lt;div class="container-fluid" id="phoneform"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-6"&gt;
              &lt;!-- iPhone --&gt;
              &lt;!-- &lt;img src="/assets/images/iphone-frame-white.png" id="iphoneframe"&gt; --&gt;
              &lt;!-- Form --&gt;
              &lt;div class="float hidden-sm-down" id="landform"&gt;
                &lt;h3&gt;&lt;strong&gt;Sign Up&lt;/strong&gt;&lt;/h3&gt;
                &lt;app-landing-form&gt;&lt;/app-landing-form&gt;
                &lt;div class="hidden-md-up"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am confident the answer is border-image, but it is not working for me.</p>
  
  <p>I would like to know if there is a way to put the image file on top of the form element.</p>
  
  <p>Thanks for your help!</p>