How to Customize Borders Around Any Element (Using Custom CSS)

Welcome back everyone!

In this post/video, I wanted to show you how you could add borders to any element within ClickFunnels, not just the sections or rows, and then also customize them! Something different that you can use with your affiliate marketing campaigns.

Reason why we are using CSS is because you are actually unable to input any borders around individual elements within the ClickFunnels basic menu, and even if you do, you have extremelyyyy limited customization options – only a few border styles, limited pixel width, but any color (at least you have that!). You can also only customize ALL 4 borders, NOT individual borders, which is a really cool customization feature in case you are interested!

So, in order for us to insert the border in the first place, we need to first select the element we want a border around, copy the custom CSS element ID, and then paste it into our custom CSS window.

We then do the regular CSS tradition, putting our braces right after the element ID, and at the end. In between, we have 4 options we can work on:

– border style (such as dotted, dashed, solid, double, groove, ridge, inset, outset, hidden – I recommend you try them all out!!)
– border width (the width of the actual border, ranging from 1px onwards)
– border color (any color in the rbg spectrum)
– border radius (if you want to round your corners, this is the way to do it)

We would proceed by adding our values for each of those properties, in the form of ‘border-style: solid;’ for example if we want to create a solid border. The cool thing about this is that we can customize the way each border side looks by adding additional values right after each other after the properties. The borders go from (top, right, bottom, left), so if I want to create solid bottom and left borders, and dashed top and right, I would say ‘border-style: dashed dashed solid solid;’ The same concept applies to our other declarations, such as color, width, and radius (radius starting from top left and going clockwise until bottom left).

And this is basically how we would adjust every part of our border to our desired level using custom CSS in ClickFunnels!

You may have excess margins when creating this border however, since the element itself may be fairly large compared to the actual picture, so make sure to check out this post
to see how you can adjust the margins!

That’s it!

Please subscribe and stay tuned for future videos where go over the technical how-to’s and/or dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

One Reply to “How to Customize Borders Around Any Element (Using Custom CSS)”

  1. Pingback: How to Create Background Gradients (Using Custom CSS) – Affiliate Marketing Essentials

Leave a Reply