Menu
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?
863
The <ellipse> element is used to create an ellipse.
Complete HTML/CSS Course 2022 To draw a rectangle in HTML SVG, use the SVG <rect> element. For rounded corners, set the rx and ry attribute, which rounds the corners of the rectangle.
Draw Rectangles To draw a rectangle, specify the x and y coordinates (upper-left corner) and the height and width of the rectangle. There are three rectangle methods : fillRect() strokeRect()
Draw a simple rectangle. Your choice of height and width , of the rectangle, will dictate the size and shape of the ellipse. The border-radius refers to the curvature at the corners of the shape; it should be set to a very high value (50% to 100%). An ellipse has been created!
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.
124
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
38
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>
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
