Chrome border issue

Question

I use the image only as the bottom. It works fine in FF, but not in Chrome.

In Chrome, it acts in 4 directions, i.e. upper left lower right

My code

.aboutbg .menu-box-content-wrapper {
  border-bottom-width: 5px;
  -webkit-border-image:url(../images/about-text-bg-box.png) 6 repeat;
  -moz-border-image:url(../images/about-text-bg-box.png) 6 repeat;
  border-image:url(../images/about-text-bg-box.png) 6 repeat;
  border-bottom-style: solid;
}

In firefox, I only see the bottom border image, but in Chrome I see the border image in all directions.

Any help is greatly appreciated. Thanks in advance.

Answer 1

You should use border-width: 0 0 5px;instead border-bottom-width: 5px;.

Check the Fiddle Here.