Se pueden redondear ??

rusoftware · #1 (**permalink**) 28/06/2004, 10:32

Sólo esa duda... Se pueden redondear las esquinas de algunas celdas, o de algunas tablas?

Gracias. Un abrazo.

bichomen · #2 (**permalink**) 28/06/2004, 12:45

Que yo sepa, no, pero puedes hacer dibujos de medio circulos y luego posicionarlos, como si de bordes se tratase.

bichomen

furoya · #3 (**permalink**) 30/06/2004, 15:23

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"> &#9827;</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;">&bull; </span> <span style="font-weight:200;"> = &amp;#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">&bull;</div></td> <td class="rojo"></td> <td><div class="esqNE">&bull;</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">&bull;</div></td> <td class="rojo"></td> <td id="cESE"><div class="esqSE">&bull;</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">
&#9556;&#9552;&#9552;&#9552;&#9574;&#9552;&#9552;&#9552;&#9559;
&#9568;&#9552;&#9552;&#9552;&#9577;&#9552;&#9552;&#9552;&#9571;
&#9553;<font color="fuchsia">qwerty.</font>&#9553;
&#9562;&#9557;     &#9554;&#9565;
 &#9492;&#9472;&#9472;&#9472;&#9472;&#9472;&#9496; 
</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="&amp;#9472">&#9472</q>  <q title="&amp;#9474">&#9474</q>  
<q title="&amp;#9484">&#9484</q>  <q title="&amp;#9488">&#9488</q>  
<q title="&amp;#9492">&#9492</q>  <q title="&amp;#9496">&#9496</q>  
<q title="&amp;#9500">&#9500</q>  <q title="&amp;#9508">&#9508</q>  
<q title="&amp;#9516">&#9516</q>  <q title="&amp;#9524">&#9524</q>  
<q title="&amp;#9532">&#9532</q>  <q title="&amp;#9552">&#9552</q>  
<q title="&amp;#9553">&#9553</q>  <q title="&amp;#9554">&#9554</q>  
<q title="&amp;#9555">&#9555</q>  <q title="&amp;#9556">&#9556</q>  
<q title="&amp;#9557">&#9557</q>  <q title="&amp;#9558">&#9558</q>  

<q title="&amp;#9559">&#9559</q>  <q title="&amp;#9560">&#9560</q>  
<q title="&amp;#9561">&#9561</q>  <q title="&amp;#9562">&#9562</q>  
<q title="&amp;#9563">&#9563</q>  <q title="&amp;#9564">&#9564</q>  
<q title="&amp;#9565">&#9565</q>  <q title="&amp;#9566">&#9566</q>  
<q title="&amp;#9567">&#9567</q>  <q title="&amp;#9568">&#9568</q>  
<q title="&amp;#9569">&#9569</q>  <q title="&amp;#9570">&#9570</q>  
<q title="&amp;#9571">&#9571</q>  <q title="&amp;#9572">&#9572</q>  
<q title="&amp;#9573">&#9573</q>  <q title="&amp;#9574">&#9574</q>  
<q title="&amp;#9575">&#9575</q>  <q title="&amp;#9576">&#9576</q>  

<q title="&amp;#9577">&#9577</q>  <q title="&amp;#9578">&#9578</q>  
<q title="&amp;#9579">&#9579</q>  <q title="&amp;#9580">&#9580</q>  </p>


</body> 
</html>

saludos

furoya