Warping text inside an area

[oxycoon]

Hello

I’ve taken to redoing my stream’s layout and with it comes a change in how my chat area is looking. The area is now a circle, and I’d like the text to stay within this circle. I’ve tried using a clipping path to make this happen, however this only hides the parts outside the area.

I checked around the web and I only found one promising guide on this, but that required me to have access to the html elements. Spesifically to create <div class="left-shape"> and <div class="right-shape"> (http://www.html5rocks.com/en/tutorials/shapes/getting-started/)

This is the shape I want the chat area to have: http://i.imgur.com/uekyqAU.png, and it’s a .png version of my .svg file.

Thank you for your time,
Oxycoon

[oxycoon]

I realize I never actually posed a question: does anyone know an alternative way to do this?

[night]

As was replied to you via email, you can use a border-radius to give the chat div a circular appearance.

#chat_box {
    border-radius: 500px;
}

You may need to add a text-indent depending on how large the radius is.

[oxycoon]

I attempted to use border-radius, however it didn’t give the desired look.

Example of look

Shows how I’ve been looking to make it.