Div have border-radius 100% need to set text in it

Question

I have a div with border-radius 100% , and i have text in it is there any way to set text in circle of that div.

I have paragraphs and Ul Li's in it the text goes out of the div area i need to wrap the text with border-radius of the div .

enter image description here

Will be possible when browsers will implement the `shape-inside` property([Isn't fully compatible yet](http://caniuse.com/#search=shape-inside)). — Weafs.py, Jan 06 '15 at 14:05
Did you try to use: padding-left: [25% of width]; padding-left: [25% of height];padding-right: [25% of width];padding-bottom: [25% of height]; ? This would give you the inner rectangle of the shape. — Noel Widmer, Jan 06 '15 at 14:09
Could you give more details about the question please. It should be possible to set text within a div with 100% border-radius. — Harry, Jan 06 '15 at 14:11
[See this for info](http://css-tricks.com/set-text-on-a-circle/) — jbutler483, Jan 06 '15 at 14:35
@jbutler483 - If I understand the question properly, the OP wants to wrap the text in a circle. — Weafs.py, Jan 06 '15 at 14:47
@chipChocolate.py: I was guessing they wanted the "text to go around in a circle" - but I could be misunderstanding the question altogether :S — jbutler483, Jan 06 '15 at 14:49

jbutler483 · Answer 1 · 2015-01-06T15:13:10.287

It's a bit long winded, but you could possibly work with it (or create it in javascript):

  .num1 {
    -webkit-transform: translate(0px, 30px) rotate(-35deg);
  }
  .num2 {
    -webkit-transform: translate(0px, 25px) rotate(-25deg);
  }
  .num3 {
    -webkit-transform: translate(0px, 23px) rotate(0deg);
  }
  .num4 {
    -webkit-transform: translate(0px, 25px) rotate(25deg);
  }
  .num5 {
    -webkit-transform: translate(0px, 30px) rotate(35deg);
  }
  span {
    display: inline-block;
    margin: 1px;
  }
.circ{
  width: 300px;
  height: 300px;
  margin: 50px auto;

    }

<div class="circ">
  <span class="num1">a</span>
  <span class="num2">b</span>
  <span class="num3">c</span>
  <span class="num4">d</span>
  <span class="num5">e</span>
</div>

Also not: I've only prefixed for webkit browsers.

From your edit, You're looking to use something like the

-webkit-shape-inside

css property.

Since this isn't supported by the Likes of Firefox or IE (at all), I would advise you not to incorporate this yet until browser support is improved.

However, if you still wish to proceed, you might find an interesting read here

Another interesting read would be this

#jbutler483 i know about this but i have edited my question please see the link attached in it i need text to represent like that — Shaban Khan, Jan 06 '15 at 14:55

Div have border-radius 100% need to set text in it

1 Answers1