El Poder del Border Radius

El Poder de Border Radius

Desde Que tengo web siempre me a impresionado ver en otras paginas un estilo "relajado" & muy novedoso y lo que veia en cada una de ellas era que todas usaban el estilo de Border Radius con css lo que le daba a la web un muy buen estilo , Ahora que andaba navegando en internet me encontre con una pagina muy buena y facil que nos brinda un gran servicio se llama Border Radius y a continuacion les muestro una explicacion de como usarlo:

1.-Como es Obio entramos a la pagina: Border Radius y nos encrontraremos con esto:


2.- Ha continuacion les mostrare las funciones de la pagina:



En la parte de Abajo se encuentran Marcados WebKit,Gecko,CSS3 Estos se Refieren a la compatiilidades

Webkit: es un motor renderizado funciona como base para el navegador web Apple Safari y Google . 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


Gecko: Es un motor renderizado usado por Firefox y en CSS se representacon :

Código:


-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft


CSS3 o W3C: Bueno este viene siendo un tipo borrador , lo cual cada navegador (menos Opera y Explorer) tienen su propia implemetacion que son las anteriormente mostradas y este e representa en CSS asi:

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 despues 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

3.- Despues Sigue escojer el grado de redondez que deseas:



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 dara:




Eso a sido todo y recuerden este tutorial fue hecho por mi especialmente para FOROTOKARG Espero que les aiga gustado y espero sus comentarior y criticas

Link de la web:

http://border-radius.com/