¿Quieres valorar este artículo? Gracias

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

Última modificación: 30 enero 2018

Bordes redondeados CSS3 

Bordes redondeados CSS3 Vamos a trabajar con la hoja de estilos .css de nuestra web para conseguir crear un div con bordes redondeados. Trabajaremos con reglas CSS3, la nueva versión que amplía las características del lenguaje de estilos CSS2. Añadiremos compatibilidad a los bordes redondeados CSS3 para los diferentes navegadores.

Cuando pensamos en CSS, lo asociamos únicamente a diseño (el estilo de la página), pero esto ha cambiado con CSS3. Con CSS3 podemos conseguir bordes redondeados, sombras, transformaciones y reposicionamiento de los elementos ya presentados en pantalla, es decir, conseguimos añadir funcionalidad. Estas modificaciones ya no están a cargo de JavaScript, es nuestra hoja de estilo quién las llevará a cabo implementando las nuevas propiedades CSS3.

CSS3 no sólo aplica reglas de estilo, CSS3 aporta forma y movimiento a los elementos de nuestra web. A partir de ahora podrás eliminar código js de tus páginas y cambiar la funcionalidad para que se ejecute desde tu hoja de estilos.

Propiedades CSS3 para conseguir bordes redondeados en un elemento HTML

Ejemplo código div con bordes redondeados

Creamos en nuestro archivo html o php un nuevo elemento html y le ponemos un nombre identificado (id) o una clase (class). En este ejemplo vamos a crear un div o caja. Para ver como actúa css redondeando los bordes del div,

Para ver como actúa css redondeando los bordes del div, vamos a aplicar un color de fondo a la caja, en nuestro ejemplo es un tono de gris. Lo aplicamos con la regla “background”.

En nuestra hoja de estilos .css añadimos el siguiente código:

Guardamos los cambios en nuestra hoja de estilos y comprobamos que el elemento div tiene ahora las esquinas redondeadas.

Las regla de estilos que empleamos para conseguir el div con bordes redondeados es: “border-radius”. 

Bordes redondeados compatibles con los distintos navegadores

La propiedad border-radius se encuentra en fase experimental (border-radius) por lo que debemos usar los prefijos –moz- (-moz-border-radius) y -webkit- (-webkit-border-radius) para que funcionen en navegadores basados en motores Gecko y WebKit, como Firefox, Safari y Google Chrome.

Si todas las esquinas tienen la misma curva o redondeo podemos utilizar un solo valor, en este caso nuestro valor de redondeo es 5px.

También podemos declarar un valor diferente para cada esquina. Los cuatro valores correspondientes se aplican en el sentido de las agujas del reloj empezando por la esquina superior izquierda.

Si lo que buscamos conseguir es una forma tipo elipsis declaramos un segundo grupo de valores separados por una barra. Los valores a la izquierda de la barra representarán el radio horizontal, mientras que los valores a la derecha representan el radio vertical.

Generador online para crear bordes redondeados css3

Por suerte hoy en día tenemos un montón de herramientas online disponibles, que nos simplifican el trabajo. Hoy vamos a ver un generador online que crea bordes redondeados CSS3 de manera sencilla e intuitiva.

En tu navegador abre la siguiente URL: http://border-radius.com/

Las opciones de la herramienta son las siguientes:

Generador online bordes redondeados

  1. Seleccionamos los distintos navegadores para que añada código para bordes redondeados CSS3 compatible. La opción CSS3 siempre debe estar marcada.
  2. Para cada esquina definimos el valor del radio.
  3. Copiamos el código que se ha creado en la ventana central y lo pegamos en nuestra hoja de estilos. 

Código generador online border radius

Puedes dar un valor border-radius distinto a cada esquina. A medida que editas los distintos valores observarás que la ventana del editor transforma sus bordes en redondeados según los parámetros introducidos.

Generador border radius código

Recuerda insertar el código CSS dentro de la regla de estilo definida para tu elemento:

Si quieres conocer más propiedades CSS3 en el siguiente enlace encontrarás información amplia y de calidad: >> www.w3schools.com

Nerea Liebana

Lph by Nerea Liébana

¿Quieres suscribirte al Newsletter?

Web Hosting

Últimos artículos