5

I am not sure if it's possible at all in HTML, but I would still ask it here:

Is there any HTML code that would stand for an ellipse or a rounded rectangle?

brilliant
  • 2,805
  • 11
  • 39
  • 57

6 Answers6

9

On another thought, it's quite possible! There you go:

http://virkkunen.net/b/oh-dear.html

Pure HTML! It doesn't even use any new-fangled CSS or JavaScript or whateverscript.

Matti Virkkunen
  • 63,558
  • 9
  • 127
  • 159
4

Yes, Canvas. But it's really the Canvas HTML tag, coupled with Javascript. Read more about CANVAS here http://en.wikipedia.org/wiki/Canvas_element

asnyder
  • 711
  • 8
  • 16
4

If you use HTML and CSS you can do this. If you don't mind using browser-specific CSS, you can get it working in Firefox with -moz, Chrome and Safari with -webkit, and IE9 and Opera 10.5 with the CSS 3 stuff that does not start with a hyphen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Rounded
        </title>
        <style type="text/css">
            div {
                -moz-border-radius-topleft: 6px;
                -webkit-border-top-left-radius: 6px;
                border-top-left-radius: 6px;
                -moz-border-radius-bottomleft: 6px;
                -webkit-border-bottom-left-radius: 6px;
                border-bottom-left-radius: 6px;
                -moz-border-radius-topright: 6px;
                -webkit-border-top-right-radius: 6px;
                border-top-right-radius: 6px;
                -moz-border-radius-bottomright: 6px;
                -webkit-border-bottom-right-radius: 6px;
                border-bottom-right-radius: 6px;
                border:solid 1px black;
                padding:10px;
                background-color:#efefef;
            }
        </style>
    </head>
    <body>
        <div>I'm rounded!</div>
    </body>
</html>
Christopher
  • 10,409
  • 13
  • 73
  • 97
2

You could get close to either of those by using the trick found here (allows you to render arbitrarily sized/positioned right triangles using divs)

Lots and lots of divs with relatively small borders. It would take a long time to hard code all the heights and widths, but you could write a script to generate the html code for you.

Of course, the easiest and quickest (in terms of development time, time needed to download the page, and likely even rendering time) solution would be to use something other than pure html, as the other folks here have already suggested.

Ponkadoodle
  • 5,777
  • 5
  • 38
  • 62
1

Border radius in CSS3 will allow you to do this in most browsers (apart from IE... /spit). http://www.css3.info/preview/rounded-border/

HTML5 provides a canvas tag, which will allow something similar to be drawn using Javascript. Again, browser support is still on-going.

You'll likely never be able to do what you're asking in pure HTML, however.

dannywartnaby
  • 5,512
  • 2
  • 21
  • 11
  • As of 2010/04/10, only Opera 10.5 will do this with CSS3 (and I *think* the IE9 preview). For Chrome 5.0.371.0, Safari 4.0.5, and FF 3.6.3, you need to use the vendor extensions. – Christopher Apr 10 '10 at 23:40
-1

No. There isn't.

Matti Virkkunen
  • 63,558
  • 9
  • 127
  • 159