Efecto CSS esquinas redondeadas: border-radius. border-left-top-radius. Ejemplos círculo o elipse (CU01058D)

Resumen: Entrega nº58 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01058D

 

 

ESQUINAS REDONDEADAS EN CSS

Las cajas CSS son rectangulares y cuando aplicamos propiedades como un color o imagen de fondo, se aplican sobre la caja rectangular. Sin embargo, para hacer los diseños web más atractivos los diseñadores usan esquinas redondeadas. Este efecto antiguamente no era fácil de conseguir y había que recurrir a utilizar imágenes de fondo con transparencia y redondeadas u otras técnicas.

css

 

Con la propiedad border-radius se ha hecho posible redondear las esquinas de las cajas con facilidad. Ten en cuenta que esta propiedad no es soportada por muchas de las versiones de navegadores que no son recientes, e incluso en algunos de los recientes todavía es posible que se consideren experimentales, lo que obliga al uso de prefijos específicos de navegador, aunque la mayor parte de los navegadores actuales ya las han introducido como estándar y no requieren de prefijo.

 

 

FORMAS DE ESPECIFICAR EL REDONDEO

El redondeo de una esquina se puede especificar con un parámetro “R” que indica el radio del círculo que se va a emplear para generar el redondeo (cuanto más grande mayor efecto de redondeo conseguiremos).

Aunque el uso de un fragmento de círculo es quizás lo más habitual, también podemos generar esquinas a partir de un fragmento de elipse como vemos en la siguiente imagen.

border-radius css

 

 

Cuando usamos un fragmento de elipse hemos de especificar dos parámetros, un valor horizontal R1 y un valor vertical R2. Si R1 y R2 son iguales equivale a usar un solo valor. Si R1 y R2 son distintos generamos distintos efectos de “achatamiento”.

 

 

PROPIEDAD BORDER-TOP-LEFT-RADIUS

PROPIEDAD CSS border-top-left-radius
Función de la propiedad Permite redondear la esquina superior izquierda de una caja CSS y definir la forma en que se hace indicando parámetros que hacen la esquina más o menos redondeada.
Valor por defecto 0
Aplicable a Todos los elementos.
Valores posibles para esta propiedad Una unidad de medida válida CSS (indica radio para el círculo que genera el redondeo de la esquina superior izquierda, excepto si se usa un porcentaje)
Dos unidades de medida válidas CSS (la primera medida indica radio horizontal de la elipse a emplear y la segunda medida radio vertical)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com .myContainer {border-top-left-radius: 40px;}
.myContainerSP { border-top-left-radius: 40px 20px;}

 

 

Si se especifican valores en forma de porcentajes, se calculan para el radio horizontal en función del valor width de la caja, y para el radio vertical en función del valor height de la caja. Si se especifica un solo porcentaje se calcularán los dos radios: el horizontal en función del ancho y el vertical en función del alto. Por tanto el uso de porcentaje implica que se aplica el redondeo por elipse.

 

 

PROPIEDADES BORDER-TOP-RIGHT-RADIUS, BORDER-BOTTOM-LEFT-RADIUS Y BORDER-BOTTOM-RIGHT-RADIUS

Estas propiedades funcionan de la misma forma que hemos visto para border-left-top-radius. Nos permiten especificar el redondeo individual de cada una de las esquinas superior derecha, inferior izquierda o inferior derecha.

 

 

PROPIEDAD BORDER-RADIUS (SHORTHAND)

PROPIEDAD CSS border-radius
Función de la propiedad Permite especificar el redondeo de todas las esquinas de una caja CSS y definir la forma en que se debe hacer.
Valor por defecto 0
Aplicable a Todos los elementos.
Valores posibles para esta propiedad Una unidad de medida válida CSS (indica radio para el círculo que genera el redondeo de todas las esquinas)
Dos unidades de medida válidas CSS (la primera medida indica radio superior izquierdo y radio inferior derecho; la segunda medida indica radio superior derecho e inferior izquierdo)
Tres unidades de medida válidas CSS (la primera medida indica radio superior izquierdo, la segunda radio superior derecho e inferior izquierdo y la tercera radio inferior derecho)
Cuatro unidades de medida válidas CSS (la primera medida indica radio superior izquierdo, la segunda radio superior derecho, la tercera radio inferior izquierdo y la cuarta radio inferior derecho)
Una a cuatro unidades de medida / Una a cuatro unidades de medida (las unidades a la izquierda de la barra son radio horizontal para el formato de elipse y las unidades a la derecha de la barra son radio vertical)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com .myContainer {border-radius: 40px;}
.myContainerSP { border-radius: 40px / 20px;}

 

 

Si se especifican valores en forma de porcentajes, se calculan para el radio horizontal en función del valor width de la caja, y para el radio vertical en función del valor height de la caja. Si se especifica un solo porcentaje se calcularán los dos radios: el horizontal en función del ancho y el vertical en función del alto. Por tanto el uso de porcentaje implica que se aplica el redondeo por elipse.

 

 

EJEMPLOS DE USO DE BORDER-RADIUS

Escribe este código y visualiza sus resultados. Con los contenidos que hemos explicado a lo largo del curso debes ser capaz de interpretar todo el código que hemos incluido. También debes ser capaz de valorar las ventajas y desventajas que puede tener usar este tipo de propiedades.

<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0; font-family: sans-serif;}
div{ border: 5px solid; height: 60px; width: 260px; margin:10px; background-color:yellow;
font-size: 20px; text-align:center; padding-top: 20px; word-wrap:break-word; }
h2{margin: 15px 0 -15px 40px;}
</style>
</head>
<body>
<h2>CSS border-radius aprenderaprogramar.com</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 5px;">border-radius: 5px;</div>
<div style="border-radius: 10px;">border-radius: 10px; </div>
<div style="border-radius: 20px;">border-radius: 20px; </div>
<div style="border-radius: 40px;">border-radius: 40px; </div>
<div style="border-radius: 60px;">border-radius: 60px; </div>
<div style="border: double #A52A2A 8px; border-radius: 13em/3em;">border-radius: 13em/3em; </div>
</div>

<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-top-left-radius: 40%;">border-top-left-radius: 40%; </div>
<div style="border-radius: 80px 20px;">border-radius: 80px 20px; </div>
<div style="border-radius: 60px 20px 5px;">border-radius: 60px 20px 5px; </div>
<div style="border-radius: 60px 20px 5px 90px;">border-radius: 60px 20px 5px 90px; </div>
<div style="border-radius: 60px/20px;">border-radius: 60px/20px; </div>
<div style="border: solid #A52A2A 5px; border-radius: 50%;">border-radius: 50%; </div>
</div>
</body>
</html>

 

 


El resultado que se obtiene en un navegador que acepte estas propiedades será similar a este:

efecto redondeo esquinas css

 

 

EJERCICIO

En numerosas ocasiones queremos crear un diseño para una página web o aplicación parecido al que nos encontramos en otra página web. Supón que has encontrado el siguiente diseño. Crea el código HTML y CSS para lograr un resultado lo más parecido posible a lo que se ve en la siguiente imagen, donde tenemos una tabla con bordes redondeados.

tabla esquinas redondeadas css

 

 

Orientación:

Crea el código de la tabla en HTML. Define una clase para la tabla (p.ej. class="tabla-destacada"), define el elemento thead para poner ahí la fila y celdas de encabezado. Define el contenido de la tabla dentro de tbody. Define la última fila como tfoot.

Busca imágenes en internet ó para introducirlas como símbolo de check o aspa en las casillas correspondientes.

Vete aplicando propiedades CSS por partes hasta lograr el efecto deseado.

Nota: no tienes que conseguir exactamente el mismo aspecto de la imagen, sólo lo más aproximado posible.

Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MAYO - JUNIO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación