Custom border on video & page

[AdieJAM]

Hi all,

I have been asked to do a custom frame around a video and also around the whole page, so they have it around the edge.

It’s like a small purple border which has a highlighted middle to the top and bottom.

Never done a border around a whole page before - they want it to stay responsive too !!?

I have tried to do this border and cant seem to do it, or responsive…I have the frame as a png too.

[PeteSharp]

Have a Google of the following styles

.border-image-slice
.border-image-source

You could potentially do this whole thing in css no images needed.

[Jerry]

@Miguel posted a pretty clever solution for this a while back:

Border on the page through breakpoints

Hi @AdieJAM, Here’s my attempt at this, which I think comes very close to what you’re looking for. Btw… considering the points bought up on this thread- particularly around using a decorative 40px border on mobile devices (which I agree is not good practice), I felt there might be a workable solution. And so I created the border not in pixels but in percentages which scales according to the screen size and thus minimizing the impact to any compromises a border can make when used on mobile devic…

[AdieJAM]

Hi both,

Thank you.

Yeah @Jerry - just found that as I remembered I asked something like this once before.
I have managed to get the colour I need, and change the thickness of the top and bottom edge, but cant seem to work out how to change the left and right edges - moved this from 98% to 99 etc…and nothing.

@PeteSharp - thank you for posting, I will have a look now.

Thank you.

[AdieJAM]

Managed how to do it using the old code and set up, but not a clue how to create this with a border around the video.

@Norm - on borders etc could gradients be brought into it?

[AdieJAM]

@PeteSharp

border-image-slice
.border-image-source

Looked at these @PeteSharp and thanks for posting, but a bit above my knowledge!

I will try again tomorrow.

I did ask @Norm above if gradients and more colour options could be added into borders & shadows etc - we cod all create some really cool borders, buttons etc with this!!! - I hunk the days of single colours are so 1990s!

[Jerry]

Just wrap your video in a DIV, give it a custom class and set a gradient background.

Hey, @Norm. Please update the template video link. It’s showing Blocs 4

[AdieJAM]

Hi @Jerry,

Thanks for posting.

Yeah I sent them something like that - but didn’t do it in a DIV - I did the background in a column - when moving the screen bigger & smaller the video image of course shows it move apart and reset when stationary. They didn’t like it.
They want it firmly attached to the video like a proper border.

Not sure if the DIV as you said will move slicker!
I’ll give it a go now.

[AdieJAM]

@Jerry,

Thank you for the tip - I have done this now in a DIV and when making the screen bigger and smaller it does tend to keep it a lot tighter than a background column !
Keep forgetting the simplicity of wrapping it in a DIV container.

Cheers!

I would still like to see the colour palette in the future able to do borders and shadows etc using gradients if this is possible, for buttons etc this will open a whole new look.