8 Técnicas para crear esquinas con CSS

3D Raised

Esquinas redondeadas con bordes salientes.


<style type="text/css">
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
</style>

<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Raised</h1>
<p>Esquinas redondeadas con bordes salientes.</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

3D Inset

Esquinas redondeadas con bordes entrantes.


<style type="text/css">
.inset {background: transparent; width:40%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}
.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}
.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
</style>

<div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Inset</h1>
<p>Esquinas redondeadas con bordes entrantes.</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

Chamfer Border

Bordes a 45 grados.


<style type="text/css">
.chamfer {background: transparent; width:40%; margin:0 auto;}
.chamfer h1, .chamfer p {margin:0 10px;}
.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
.chamfer p {padding-bottom:0.5em;}
.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
.chamfer .b1 {margin:0 5px; background:#000;}
.chamfer .b2 {margin:0 4px;}
.chamfer .b3 {margin:0 3px;}
.chamfer .b4 {margin:0 2px;}
.chamfer .b5 {margin:0 1px;}
.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
</style>

<div class="chamfer">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
<div class="boxcontent">
<h1>Chamfer Border</h1>
<p>Bordes a 45 grados.</p>
</div>
<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Square cutout Border

Bordes recortados 1.


<style type="text/css">
.square {background: transparent; width:40%; margin:0 auto;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}
.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}
.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}
</style>

<div class="square">
<b class="top"><b class="b1t"></b><b class="b2"></b></b>
<div class="boxcontent">
<h1>Square cutout Border</h1>
<p>Bordes recortados 1.</p>
</div>
<b class="bottom"><b class="b2"></b><b class="b1b"></b></b>
</div>

Curved cutout Border

Bordes recortados 2.


<style type="text/css">
.curved {background: transparent; width:40%; margin:0 auto;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.curved p {padding-bottom:0.5em;}
.curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}
.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}
</style>

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Curved cutout Border</h1>
<p>A Bordes recortados 2.</p>
</div>
<b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Flared shape

Esquinas con efecto serif.


<style type="text/css">
.serif {background: transparent; width:40%; margin:0 auto;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.serif p {padding-bottom:0.5em;}
.serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}
.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
</style>

<div class="serif">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Flared shape</h1>
<p>Esquinas con efecto serif.</p>
</div>
<b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Pillar shape

Esquinas con efecto pilar.


<style type="text/css">
.pillar {background: transparent; width:40%; margin:0 auto;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.pillar p {padding-bottom:0.5em;}
.pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}
.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}
.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
</style>

<div class="pillar">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>Pillar shape</h1>
<p>Esquinas con efecto pilar.</p>
</div>
<b class="bottom"><b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Barrel shape

Bordes estilo barril.


<style type="text/css">
.barrel {background: transparent; width:40%; margin:0 auto;}
.barrel h1, .barrel p {margin:0 10px;}
.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.barrel p {padding-bottom:0.5em;}
.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}
.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}
.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}
.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}
.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}
.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}
.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}
.barrel .b1 {margin:0 33%;}
.barrel .b2 {margin:0 20%;}
.barrel .b3 {margin:0 12%;}
.barrel .b4 {margin:0 5%;}
.barrel .b5 {margin:0 1px;}
.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}
</style>

<div class="barrel">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
<div class="boxcontent">
<h1>Barrel shape</h1>
<p>Bordes estilo barril.</p>
</div>
<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

REFERENCIAS:
  • CSSplay

    • JMiur | LEER |

    25 comentarios:

    k_nelita

    Aviso que no se como se escribe pero fue lo primero que me vino a la mente y a la boca, cuando vi ese pedazo de código: Achalay!! :O y donde hay que poner semejante código??

    Se pone en la plantilla y queda para todas las imagenes? O no es para imagenes? :o
    Se pone en el editor de las entradas?
    No entiendo nada :S

    12:53 AM  
    Bonzu Pipinpadaloxicopolis III

    Los Style van antes del ]]></b:skin> de la plantilla, y el Div en el post.

    1:54 AM  
    Graciela de Palomas

    JMIUR voy por el paso 2, mi alegría cuando veo que sí queda!!! (Magazine)
    Muy buena la entrada, me encanta!!!...Nelita creo si no me equivoco, para hacer bordes en la cabecera, título de los post, cuerpo de los post y más...solo usar la imaginación.
    Si no es así J te lo dirá...mis besos!!

    7:08 AM  
    Mamots

    y bien, como has podido colocar los dos estilos de agregar comentarios?

    saludos

    7:38 AM  
    sølrαc

    Buenísimo JM :O sobre todo por que evita usar imágenes que sobrecargue la página ;)

    8:03 AM  
    Gem@

    Con esto se resuelve el problema de esquinas redondeadas con Explorer ¡ que gran descubrimiento! :)
    Si no me equivoco los estilos pueden añadirse entre <head> y </head>
    El Div lo añadimos en la plantilla justo donde deseamos añadir el bloque aunque sería necesario modificar el tamaño en los estilos claro está.
    Para las entradas sería necesario añadir unos estilos y un nombre, yo hablo sola luego tu me corriges |O

    10:36 AM  
    Gem@

    Quería poner esta carita :S pero me salió el enojado.

    10:38 AM  
    LacraX

    Oh no , es una ilusión :O , NO. Bordes redondeados en Internet Explorer :)!!!!!!

    Muy bueno , lo voy a usar pronto-

    1:21 PM  
    JMiur

    Sin duda son interesantes, realmente me asombraron :)

    Si se quiere tener alguna de estas clases para usarlas en todo el sitio, por ejemplo, para los títulos, lo razonable es colocar el código del estilo antes de </head> y el DIV, donde quiera mostrarse el texto.

    Si se quiere colocar junto con el resto de los estilos, es decir, entre <b:skin> y </b:skin>, entonces, colocamos sólo el contenido y eliminamos las etiquetas <style> y </style>

    Lo de los comentarios puede verse en este post

    4:43 PM  
    k_nelita

    No termino de entender, si por ejemplo lo quiero poner en el footer de los post, el css ya se donde va, en la parte de estilos, pero y lo otro donde? O sea la parte de los div? :O
    Estoy un poco mas estúpida que de costumbre porque estoy muy congestionada :S

    3:08 AM  
    Σ=o) Pau

    Hola J, por ahora me remito a decirte que se ve genial, luego lo probaré y te cuento si tengo dudas porque esta semana ha sido un poco atareada :)
    Que tengas un lindo fin de semana :)

    besos ronroneados

    4:12 PM  
    JMiur

    k_nelita: Los DIVS van donde quieras que se vea. Hacé la prueba en un post, por ejemplo.

    Pau: Me alegra que te gusten, espero ver la prueba :)

    4:39 PM  
    k_nelita

    En un post?? En el editor de entradas? atchiiiiss... (resfrío) :S Un día 34º y al otro 17º, estoy apestadísimaaaa :'(
    O en la parte de post en la plantilla?

    4:57 PM  
    JMiur

    En el editor de entradas. Es lo que ves en este post. Todo está en el mismo post. Depende mucho de para qué querés utilizarlo.

    9:11 PM  
    k_nelita

    No se para que lo quiero pero me gustaba... ya probé en blog de pruebas y no le veo mucha utilidad, pero quizás en algún momento sepa para que :o

    10:05 PM  
    jose m.

    Se puede poner un enlace para usar como un botón? Y donde poner dicho enlace?

    7:20 PM  
    JMiur

    Para no tener que luchar con las propiedades que es algo engorroso de hacer, lo mejor, sería usar el evento onclick en el primer DIV. Por ejemplo, en el primer botón:

    <div class="raised" onclick="location.href='http://google.com/';" >

    9:17 PM  
    Tigremen

    Hola Jmiur,
    Yo tengo los post con un fondo diferente BLOG DE PRUEBAS y me gustaria redondear las esquinas en donde tengo que meter el codigo CSS? ahora como ves en la plantilla que estoy haciendo es un rectangulo.

    Saludos master.

    8:01 AM  
    JMiur

    El CSS siempre se coloca entre <b:skin> y </b:skin> o bien, entre etiquetas <style> y </style>

    Las propiedades seguramnete son las que corresponden a la clase post:

    .post {
    ...........
    }

    3:50 PM  
    Tigremen

    El CSS ya lo agregue arriba de ]]><[/b:skin] actualmente en .post tengo solo un borde inferior "border-bottom:1px dotted $bordercolor;".
    El CSS que quiero emplear es "chamfer border" entiendo que la clase es chamfer.

    Disculpa mi ignoracia pero no se como agregar este clase dentro de .post. ¿podras decirme como?

    Saludos JMiur.

    5:30 PM  
    JMiur

    Es que, para hacer eso, no sólo hay que usar las clases CSS sino también modificar la plantilla y el HTML. No es poca cosa :)

    7:38 PM  
    Tigremen

    Estoy leyendo algo de los post resumidos, por ahi voy a ver si encuentro algo, bueno voy a intentarlo.

    Saludos JMiur :D

    8:09 PM  
    rene israel

    estas bonita tu web me gusto tienes muchos codigos uttiles para mi sisito web muscghas gracias por compartir

    1:15 AM  
    JMiur

    Gracias por el comentario, rene :D

    3:56 PM  

    ¿Quiere dejar un comentario?

    Hay varios métodos posibles.

    Uno de ellos es el formulario de comentarios que tan generosamente nos ha regalado Blogger y que funciona sólo de tanto en tanto. Su uso es aconsejable sólo en caso de ser una de esas personas a las que les gustan los retos y los desafíos.
    ¿No quiere arriesgarse? Haga click para ocultarlo y utilice las otras opciones.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

    Los comentarios están siendo moderados y serán publicados a la brevedad.

    Suscribirse a los comentarios