Hello, 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?
views:
290answers:
6
+3
A:
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
2010-04-10 23:31:04
It's pretty sad that it took so long to get a canvas!
Pierreten
2010-04-10 23:40:27
Not to be a spoilsport, but let's not forget this will not work on IE without a load of extra JavaScript for canvas emulation.
Matti Virkkunen
2010-04-10 23:49:47
+4
A:
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>
Chris
2010-04-10 23:33:15
Note that IE9 doesn't even have a release date yet...I'd guess not until sometime in 2011...
Michael Haren
2010-04-11 04:12:57
+1
A:
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
2010-04-10 23:33:47
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.
Chris
2010-04-10 23:40:56
+2
A:
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.
Wallacoloo
2010-04-10 23:45:53
+7
A:
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
2010-04-10 23:59:58