Hola todos:
si, eso se hace con imágenes. La pregunta se hizo y respondió varias veces,
rusoftware, puedes usar el buscador interno.
Aprovecho tu tema para postear una curiosidad. Ésto se hace sin imágenes, con HTML y CSS, pero las limitaciones son enormes. Está hecho para
IE, aunque en la versión
6 con
XP (o alguna de sus combinaciones) no se ve porque MS ha cambiado el diseño de los elementos de formulario.
[edit]Agregué un
meta que corrige el problema. Lo que no sé es qué
doctype usar. Seguramente ninguno, ya que un código que usa una tabla como sporte de
div's no debe estar contemplado en ninguno
[/edit]
Código:
<html>
<head>
<meta http-equiv="msthemecompatible" content="no" >
<title> BORDE CURVO CON RADIOBUTTON.</title>
<style>
.abs{position:absolute;}
</style>
</head>
<body bgcolor="beige">
<h2>Esquinas redondeadas usando <tt>radio</tt> y <tt>div</tt> con bordes. (IE)</h2>
<p>
<table align="center" border="0" cellspacing="0" height="150px" width="100px"><div class="abs"><tbody>
<div class="abs">
<input class="abs" type="radio" style="height:30px; width:30px; top:0; left:0;" readonly="readonly">
<input class="abs" type="radio" style="height:30px; width:30px; top:0; left:67px;" readonly="readonly">
<input class="abs" type=radio style="height:30px; width:30px; top:120px; left:67px;" readonly="readonly">
<input class="abs" type=radio style="height:30px; width:30px; top:120px; left:0;" readonly="readonly">
<div class="abs" style="background:white; height:140px; width:72px; top:5px; left:13px; border-top:inset 2px; border-bottom:inset 2px"> </div>
<div class="abs" style="background:white; height:120px; width:88px; top:15px; left:6px; border-left:inset 2px; border-right:inset 2px"> </div>
</div>
<div class="abs" align="center" style="padding-top:45px ; overflow:hidden; height:150px; width:100px; font:bold 46px"> ♣</div>
</tbody></div> </table><br /></p>
<table align="center" border="0" cellspacing="0" height="200px" width="300px"><div class="abs"><tbody>
<div class="abs">
<input class="abs" type="radio" style="height:100px; width:100px; top:0; left:0; " readonly="readonly">
<input class="abs" type="radio" style="height:100px; width:100px; top:0; left:200px; " readonly="readonly">
<input class="abs" type="radio" style="height:100px; width:100px; top:100px; left:200px; " readonly="readonly">
<input class="abs" type="radio" style="height:100px; width:100px; top:100px; left:0; " readonly="readonly">
<div class="abs" style="background:white;height:183px;width:202px;top:8px;left:50px;border-top:inset 12px;border-bottom:inset 12px;"> </div>
<div class="abs" style="background:white;height:100px;width:283px;top:50px;left:10px;border-left:inset 12px;border-right:inset 12px ;"> </div>
</div>
<div class="abs" align="center" style="padding:25px ; overflow:hidden; height:200px; width:300px"> <h3>QWERTYUIOP</h3></div>
</tbody></div> </table><br /></p>
</body>
</html>
Otra rareza; esta vez con caracteres, el primero solamente se ve si tienes instalada la fuente
'courier new'; el segundo usa
Box Drawing, y no todos los navegadores la muestran (además, los bordes no son curvos, pero a alguien le va a servir para algo)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> BORDES CON CARACTERES.</title>
<STYLE>
<!--
body{background-color:beige;}
#tabla1{border-collapse:collapse; align:center; }
#tabla1 td{padding:0; }
#tabla1 #cTexto{padding:10px; position:relative; z-index:100; background:#fcc; text-align:center}
#tabla1 td.rojo{background:red; }
.esqNO{height:86px; width:54px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-64px; margin-left:-32px}
.esqNE{height:86px; width:78px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-64px; margin-left:-56px;}
.esqSE{height:108px; width:78px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-84px; margin-left:-56px; position:relative; z-index:-1}
.esqSO{height:108px; width:54px; padding:0; font:180px 'courier new'; color:red; overflow:hidden; margin-top:-84px; margin-left:-32px}
#cESE{position:relative; z-index:-0}
// -->
</STYLE>
</head>
<body>
<h2>Esquinas redondeadas usando caracter <i>bullet</i> ( <span style="font-size:150%; color:red;">• </span> <span style="font-weight:200;"> = &#0149</span> ) y fuente <span style="font-family:'courier new';">'courier new'</span>.</h2>
Para <b>IE , FF0.93+ , Op7.5+</b>.<p>
<table align="center" id="tabla1"><tr>
<td><div class="esqNO">•</div></td> <td class="rojo"></td> <td><div class="esqNE">•</div></td>
</tr>
<tr>
<td class="rojo"></td> <td id="cTexto"><div>QWERTYUIOP <br>qwertyuiop</div></td> <td class="rojo"></td>
</tr>
<tr>
<td><div class="esqSO">•</div></td> <td class="rojo"></td> <td id="cESE"><div class="esqSE">•</div></td>
</tr></table>
</p>
</body>
</html>
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> BORDES CON CARACTERES.</title>
<STYLE>
<!--
q{cursor:help; font:14pt}
// -->
</STYLE>
</head>
<body bgcolor=beige>
<h2>Bordes con caracteres <i>Box Drawing</i>.</h2>
<center><pre style="font-size:30pt; font-family:'courier new', 'monotype.com', 'courier'; color:green">
╔═══╦═══╗
╠═══╩═══╣
║<font color="fuchsia">qwerty.</font>║
╚╕ ╒╝
└─────┘
</pre></center><p>
Lista de caracteres disponibles. (Señale el caracter hasta que el puntero cambie a <tt>help</tt> para ver el código)</p>
<p>
<q title="&#9472">─</q> <q title="&#9474">│</q>
<q title="&#9484">┌</q> <q title="&#9488">┐</q>
<q title="&#9492">└</q> <q title="&#9496">┘</q>
<q title="&#9500">├</q> <q title="&#9508">┤</q>
<q title="&#9516">┬</q> <q title="&#9524">┴</q>
<q title="&#9532">┼</q> <q title="&#9552">═</q>
<q title="&#9553">║</q> <q title="&#9554">╒</q>
<q title="&#9555">╓</q> <q title="&#9556">╔</q>
<q title="&#9557">╕</q> <q title="&#9558">╖</q>
<q title="&#9559">╗</q> <q title="&#9560">╘</q>
<q title="&#9561">╙</q> <q title="&#9562">╚</q>
<q title="&#9563">╛</q> <q title="&#9564">╜</q>
<q title="&#9565">╝</q> <q title="&#9566">╞</q>
<q title="&#9567">╟</q> <q title="&#9568">╠</q>
<q title="&#9569">╡</q> <q title="&#9570">╢</q>
<q title="&#9571">╣</q> <q title="&#9572">╤</q>
<q title="&#9573">╥</q> <q title="&#9574">╦</q>
<q title="&#9575">╧</q> <q title="&#9576">╨</q>
<q title="&#9577">╩</q> <q title="&#9578">╪</q>
<q title="&#9579">╫</q> <q title="&#9580">╬</q> </p>
</body>
</html>
saludos
furoya