Autor Tema: [Tutorial] Bordes Redondeados con Css  (Leído 2553 veces)

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
[Tutorial] Bordes Redondeados con Css
« en: 04 de Enero de 2010, 00:29:14 am »
Todos hemos querido hacer alguna vez para nuestro diseño o una imagen o un formulario unos bordes redondeados, pues aqui esta la solucion.

Antes para obtener un resultado redondeado teniamos que crear tres imagenes, una para el top, otra para el center y otra para el bottom, pero ahora tenemos la solucion.



<style>
.border{
   width:100px;
   height:100px;
   border:solid 1px #000;
   border-radius:3px;
   -ms-border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -khtml-border-radius:3px;
}
.borderimg{
   border:solid 1px;
   border-radius:3px;
   -ms-border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -khtml-border-radius:3px;
}
</style>
<div class="border"></div>

<img src="imagen.png" width="260" height="260" class="borderimg">

Ahora solo tienes que modificar puedes modificar los colores o agregarle mas cosas y listo.

Comunidad PHPeros

[Tutorial] Bordes Redondeados con Css
« en: 04 de Enero de 2010, 00:29:14 am »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #1 en: 04 de Enero de 2010, 11:47:21 am »
podrias explicar un poco, no?

border-radius:3px;
   -ms-border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -khtml-border-radius:3px;
y para k es eso, ¿funcion con ie?

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #2 en: 04 de Enero de 2010, 22:31:57 pm »
podrias explicar un poco, no?

border-radius:3px;
   -ms-border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -khtml-border-radius:3px;
y para k es eso, ¿funcion con ie?

Mira cada uno tiene la funcion de una esquina entonces por ejemplo tu quieres que solamente tenga bordes a la parte inferior nomas te serviran dos.

por ejemplo los bordes normales

   border-top-style: 3px;
   border-right-style: 3px;
   border-bottom-style: 3px;
   border-left-style: 3px;

entonces si nomas te sirven son los dos lados eliminas el top y el bottom
pero si tu pones
   border: 3px;
Lo aplica a todos los datos lo mismo es para
   -ms-border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -khtml-border-radius:3px;
Cada uno es para una de las esquinas
y si pones
border-radius:3px; lo aplica a todas las esquinas

Con ie explorer no funciona, no se si con el 8 si por que no lo e instalado pero solo funciona con los navegadores mas recientes que ya traen las funciones nuevas actualizadas como por ejemplo una funcion para la opacidad.

(:
si tienes alguna otra duda posteala

Desconectado x.mara.x

  • PHPero Master
  • ******
  • Mensajes: 1.364
  • Karma: 57
  • Sexo: Femenino
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #3 en: 04 de Enero de 2010, 23:48:02 pm »
Mira cada uno tiene la funcion de una esquina entonces por ejemplo tu quieres que solamente tenga bordes a la parte inferior nomas te serviran dos.

por ejemplo los bordes normales

   border-top-style: 3px;
   border-right-style: 3px;
   border-bottom-style: 3px;
   border-left-style: 3px;

entonces si nomas te sirven son los dos lados eliminas el top y el bottom
pero si tu pones
   border: 3px;
Lo aplica a todos los datos lo mismo es para
   -ms-border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   -khtml-border-radius:3px;
Cada uno es para una de las esquinas
y si pones
border-radius:3px; lo aplica a todas las esquinas

Con ie explorer no funciona, no se si con el 8 si por que no lo e instalado pero solo funciona con los navegadores mas recientes que ya traen las funciones nuevas actualizadas como por ejemplo una funcion para la opacidad.

(:
si tienes alguna otra duda posteala
creo que el sabe, pero a lo que se refiere es a que lo pongas en el tutorial

Desconectado nac

  • PHPer@ Fijo
  • ***
  • Mensajes: 139
  • Karma: 2
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #4 en: 09 de Enero de 2010, 20:57:57 pm »
No, no funciona con IE :(

Desconectado chihue

  • PHPero Master
  • ******
  • Mensajes: 1.118
  • Karma: 43
  • Sexo: Masculino
  • 8 dias
    • Ver Perfil
    • Minichat con todo incluido
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #5 en: 10 de Enero de 2010, 13:35:08 pm »
Con MF si funciona lo probe
« Última modificación: 10 de Enero de 2010, 13:43:02 pm por chihue »

Desconectado javipilo

  • PHPero Experto
  • *****
  • Mensajes: 975
  • Karma: 31
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #6 en: 03 de Abril de 2010, 23:13:58 pm »
y tambien con Google Chrome!!

Yo uso ese jaajaj

Desconectado alegus9

  • PHPero Avanzado
  • ****
  • Mensajes: 263
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #7 en: 03 de Abril de 2010, 23:21:42 pm »
Esto lo puedes hacer en fireworks, creas la imagen y la redondeas ...

Para un formulario creo que esta bien

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #8 en: 03 de Abril de 2010, 23:24:58 pm »
Esto lo puedes hacer en fireworks, creas la imagen y la redondeas ...

Para un formulario creo que esta bien
Eso implica hacer imagenes, cargarlas, aplicarlas con CSS = tiempo tuyo + tiempo de carga

PD: IE9 ACEPTA ESTANDARES! BORDER-RADIUS TAMBIEN!

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #9 en: 04 de Abril de 2010, 02:56:48 am »
Esto lo veo muyyy ilogico el tema.
Para empezar...

OmaarV para ver si sabes lo que posteas :)
Como haces para poner mas redondeadas (mas pixeles en la curva)

No se.. Por que si lo pones así.. diría que es el mismo código sacado del login de restrillox...
Digo.. de donde lo sacaron todos...
O Creen que la gente es estúpida?

Explica aver :)
Twitter: @JoakoM010



Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #10 en: 04 de Abril de 2010, 03:12:42 am »
Joaquín no creo que haya razón para ofender, la verdad ;).
- Moderador de PHP


Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:[Tutorial] Bordes Redondeados con Css
« Respuesta #11 en: 25 de Abril de 2010, 19:29:25 pm »
Esto lo veo muyyy ilogico el tema.
Para empezar...

OmaarV para ver si sabes lo que posteas :)
Como haces para poner mas redondeadas (mas pixeles en la curva)

No se.. Por que si lo pones así.. diría que es el mismo código sacado del login de restrillox...
Digo.. de donde lo sacaron todos...
O Creen que la gente es estúpida?

Explica aver :)

   -moz-border-radius: 10px; /* For FireFox */
   -webkit-border-radius: 10px; /* For Safari/Chrome */
   border-radius: 10px; /* For when the standard gets fully supported */

Si quieres que redondee mas simplemente aumentas los px (: