1

I am very new to web development, and I need to create objects that contain text in a box with rounded edges, as in the image enter image description here The size of the border should grow with the size of the text.

I can't use any css libraries or css3 border-radius. Would anyone mind pointing me in the right direction? I don't want full working code - I want to figure the details out on my own - but a list of links or subjects to research would be much appreciated.

Thanks!

---edit---- I also can't use any css or javascript libraries. I'm doing this for an assignment rather than a real-world scenario - hence the limitations.

Kvothe
  • 467
  • 4
  • 13

2 Answers2

0

If you don't want to use css or images to achieve the rounded corner look, you can check out nifty corners.

Basically it uses javascript to overlay new tags on the corners and use color contrast to get the curve lines.

Community
  • 1
  • 1
Mr. 14
  • 9,228
  • 6
  • 37
  • 54
0

Well, if you don't use libraries and css3.. you have two options:

  1. Slice up images of a rounded rect, put the text within a div and create a bunch of other divs with background set to those images, details can be found here

  2. Use a canvas refer here

Don't worry, canvas isn't a library, its a part of the Html5 spec (though I don't know if you can use html5) Read more about canvas and how to use it here and a simple tutorial here. How to draw text within a canvas is explained here

Community
  • 1
  • 1
Mutahhir
  • 3,812
  • 3
  • 21
  • 26
  • The canvas stuff is just what I was looking for, I think I've got it working now. Thanks for the great links! – Kvothe Oct 07 '12 at 21:59