Text box with rounded corners (in html)

bronwynandadam · Member · Sep 24, 2014 at 2:22 pm
Copy link

Add topic to favorites
Hi! I’ve been using the following instructions for creating shaded boxes around text:

https://en.forums.wordpress.com/topic/creating-a-text-box-with-tint-background?replies=5

However, I’d like to create a box with rounded corners. I can only find instructions on how to do this using CSS. Is there an html-only way to round the corners?

Here’s the page I’m working on in case it helps to see what I’ve got so far:

You prepare for the man to pull out an invitation of his own and reveal they’ve been working to help the paranormal…

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Sep 24, 2014 at 2:39 pm
Copy link
You need CSS to do this, but it can be done inline (in the HTML/text editor without needing the custom design upgrade.

All you need to do is include a new declaration in your style attribute, in this case it is “border-radius” as shown below, with whatever value you think looks best for the size of the rounded section.

border-radius:15px;

I’m going to add in a few prefix versions to support older browsers too, your final HTML ends up looking like this:
```
<div style="border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;width:45%;float:center;background-color:#c2c2d6;margin-left:0;padding:10px;text-align:center;">
One story...
</div>
```
bronwynandadam · Member · Sep 24, 2014 at 2:45 pm
Copy link
Ooh! Check it out! Thanks so much!

No items found.