CODEWITHSUNDEEP
htmlcssfirefox
Shayan Razavi
Shayan Razavi

Reputation: 103

css3 -moz-border-image isn't working?

I'm new to CSS3 and HTML and I'm trying to get the -moz-border-image to show but it isn't showing instead it shows border: 20px solid red; even if i get rid of the border code it still wont show the -moz-border-image because it needs a border-width to show and all the code is in .sampleDiv2.

I'm using a firefox browser. Thanks 

<!doctype html>
<html>

<head>
  <title>CSS3 borders</title>

  <style>
    body {
      margin-left: 40px;
    }
    .sampleDiv {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      border-width: 16px;
      border-style: solid;
      border-color: red;
      border-radius: 25px 50px 100px 200px;
    }
    .sampleDiv2 {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      -moz-border-image: url( http://s28.postimg.org/hs0wu7rvx/star_frame.png) 50 50 50 round;
      border: 20px solid red;
    }
  </style>
</head>

<body>

  <h1>CSS3 borders</h1>
  <div class="sampleDiv"></div>
  <br/>
  <div class="sampleDiv2"></div>

</body>

</html>

This is what should happen to .sampleDiv2 because i did 50px for the slice property , 50px for how much of the width i wont to use, i did 50px for the outside border (What i am talking about wont match the picture because im guessing it's big) and round to go around the border.

Upvotes: 0

Views: 89

Answers (1)

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

I got it to work.

 body {
      margin-left: 40px;
    }
    .sampleDiv {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      border-width: 16px;
      border-style: solid;
      border-color: red;
      border-radius: 25px 50px 100px 200px;
    }
    .sampleDiv2 {
      background-color: rgba(255, 0, 0, .2);
      width: 200px;
      height: 200px;
      -moz-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Safari */
  -o-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Opera */
  border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat;
    }

Fiddle: http://jsfiddle.net/kzoydpwL/

EDIT: You can learn about border-image at this link...

The major problem you had with your code was that you didn't even provide an image link. http://postimg.org/image/3ll5yzh0p/ is not a direct link to the image while http://s28.postimg.org/hs0wu7rvx/star_frame.png is.

Upvotes: 1

Related Questions