[Solved] How to make a text box, transparent, rounded corners

[Michael Frank]

Hi,

I like the semi transparent text boxes with rounded corners. For example on the website of Adele (www.adele.tv). They have rounded corners and even two colors for a read more button and comments. Also the size seems auto-adjusted to the text.

I want to put everything in a box on my homepage, so not only text but also video or instagram ‘output’.
Is this possible using a code on my wordpress page/custom css on my page and what would it be?

[Paulie_D]

You can use your browser’s Developer Tools to examine the HTML & CSS for the site and work it out for yourself.

Rounded corners is achieved using the border-radius property…it’s been around for some time.

The semi-transparent ‘boxes’ is actually done using a background image which has transparency. It’s not really necessary as we can do semi-transparent backgrounds using rgba or hsla colors…but perhaps the designer of this site wanted a fallback…although I think it’s unnecessary.

Is this possible using a code on my wordpress page/custom css on my page and what would it be?

A code?….No.

A fair amount of code?…Yes.

Frankly, from your questions I suspect you are quite new to this arena so you might be better off looking for a pre-built theme that does most of the work for you and tweaking it to your exact requirements.

[Michael Frank]

Thanks for your reply Pauly! I used the border-radius and rgba color codes, works perfect for me!

[Author]

Posts