Transparent Outter Border Effect

I attempted to make a transparent outter border effect for a design as displayed in this post.

To make this effect in HTML/CSS, I tried to make a outter wrapper that wrapped all the contents of the website with a thick border and opacity set to 8%. Unfortunately, opacities set in parent objects will pass to its children as well; meaning all contents under this wrapper also will have an opacity of 8%. There is no way of getting around this.

The solution to this problem is to make the outter wrapper have an image background consisting of the 8% transparency as needed. Thus, there is no need to adjust the opacity in CSS directly.

Leave a Reply

Your email address will not be published.