Multi colored gradient border

[jknetdesign]

http://www.austinharlowwinery.com/contact/

http://www.austinharlowwinery.com/wp-content/themes/midlifecrisis/images/gradient-border.png

The task is to add a border around this Google map with these gradients. Any suggestions on the CSS?

[rkieru]

You may wish to review this example page: https://css-tricks.com/examples/GradientBorder/

It provides several options to achieve the basic gradient you want, you would need only pick the one that best suits your requirements and of course place in the necessary color transitions.

[jknetdesign]

Right there’s many articles like that but in regards to support what’s the first step? I tried iframe, I tried #mapDiv, then I tried wrapping the iframe with a new class and nothing applies.

[Beverleyh]

then I tried wrapping the iframe with a new class and nothing applies.

Not sure what you mean there. Can you make a demo of what you’ve tried in something like CodePen so that we can see the problem first hand?

As for support;
border-image http://caniuse.com/#feat=border-image
linear-gradient http://caniuse.com/#feat=css-gradients

[jknetdesign]

Resolved! I used a minimized approach like this:

.fancy-border {
  background-image: linear-gradient(90deg, red, blue), linear-gradient(90deg, red, blue);
  background-position: 0 0px, 100% 100%;
  background-repeat: no-repeat;
  background-size: 100% 5px;
  border-left: 5px solid red;
  border-right: 5px solid blue;
  padding: 10px 5px;
}
.fancy-border > iframe { margin:0 }

[rkieru]

Glad you were able to resolve this! I don’t know if you noticed though… but your navigational menu background is appearing above your brand logo. Looks like a conflicting z-index issue.

[Author]

Posts