Comunidad de diseño web y desarrollo en internet

Bordes redondeados en CSS 3 con border-radius

Siempre me a impresionado ver en otras paginas el estilo de bordes redondeados o Border Radius con CSS lo que le daba a la web un muy buen estilo. Encontré una pagina muy buena y fácil llamada Border Radius y a continuación les muestro una explicación de como usarla:

Entrar a Border-Radius.com


Entramos al sitio Border Radius y nos encontramos con esto:


Funciones y capacidades de Border-Radius.com



En la parte de Abajo se encuentran Marcados WebKit, Gecko, CSS3. Estos son motores de render de los navegadores.

Webkit: Es un motor renderizado. Funciona como base para Safari y Google Chrome. En el CSS se representa:

Código :

-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius[/css]
[b]Gecko:[/b] Es el motor de render usado por Firefox y en CSS se representa con :
[css]-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

CSS3 o W3C: Esta es la forma correcta, que aun no la implementan muchos. Cada navegador (menos Opera y Explorer) tienen su propia implementación, pero esta es la forma estandar:

Código :

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Hay otro que aunque no viene en la pagina se los voy a explicar:
Khtml : Este fue creado para el navegador Konqueror que ya después fue adaptado por apple para su navegador Safari y en el CSS se representa:

Código :

-khtml-border-radius
-khtml-border-top-left-radius
-khtml-border-top-right-radius
-khtml-border-bottom-right-radius
-khtml-border-bottom-left-radius

Elegir redondez de las esquinas de tu caja en border-radius



En esas esquinas marcadas en la aparte anterior es donde debes ingresar el numero en pixeles de el grado de redondez deseada lo cual nos dará:


Eso es todo este tutorial. Es el primero que hago para esta comunidad y espero que les sirva de algo que es el objetivo

El sistema está en: http://border-radius.com/

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate