Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Okay I went over the documentation on <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds</a></p> <p><strong>The new CSS</strong></p> <pre><code>.btn { float: left; display: block; padding: 10px 30px; /* Notice that I list all the images */ background: url("../img/border-top-left.png"), url("../img/border-top-right.png"), url("../img/border-bottom-left.png"), url("../img/border-bottom-right.png"); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; background-color: #67b8de; } </code></pre> <p>You will notice that I use the <code>background:</code> property, you can also use the <code>background-image</code> property, thanks for the tip <em>minitech</em>. You also should notice that you can't just specify individual image is you want to target all the corners of the button. Example:</p> <pre><code>background-image: url("../img/border-blah-blah.png"); background-repeat: no-repeat; background-position: top right; </code></pre> <p>This will not target all of your corners, but only one corner will be targeted this is because of the cascade it will overwrite the previous rule, that's why you have to input the sources for all your images at once and then target them. Also you should put the <code>background-color</code> property last, because the color won't be applied if it is the first rule. I don't know why that happens.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload