Redondeo de CSS

Redondeo de CSS

A través de CSS border-radius Las propiedades pueden lograr cualquier estilo de 'borde redondeado' para cualquier elemento.

Propiedad border-radius CSS

CSS border-radius El atributo define el radio de las esquinas del elemento.

Consejo:¡Puede usar este atributo para agregar esquinas redondeadas a los elementos!

Aquí hay tres ejemplos:

1. Elementos con color de fondo especificado con bordes redondeados:

¡Bordes redondeados!

2. Elementos con bordes redondeados:

¡Bordes redondeados!

3. Elementos con imágenes de fondo con bordes redondeados:

¡Bordes redondeados!

Este es el código:

Ejemplo

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Intente hacerlo usted mismo

Consejo:border-radius El atributo es en realidad un atajo para los siguientes atributos:

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

CSS border-radius - especificar cada esquina

border-radius El atributo puede aceptar de uno a cuatro valores. Las reglas son las siguientes:

Cuatro valores - border-radius: 15px 50px 30px 5px;(Se usa sucesivamente para: esquina superior izquierda, esquina superior derecha, esquina inferior derecha, esquina inferior izquierda):

Tres valores - border-radius: 15px 50px 30px;(El primer valor se usa para la esquina superior izquierda, el segundo valor se usa para la esquina superior derecha y la inferior izquierda, el tercero para la esquina inferior derecha):

Dos valores - border-radius: 15px 50px;(El primer valor se usa para la esquina superior izquierda y la inferior derecha, el segundo valor se usa para la esquina superior derecha y la inferior izquierda):

Un valor - border-radius: 15px;(Este valor se usa para todos los cuatro ángulos, las esquinas redondeadas son iguales):

Este es el código:

Ejemplo

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Intente hacerlo usted mismo

También puede crear esquinas elípticas:

Ejemplo

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Intente hacerlo usted mismo

Atributo de borde redondeado de CSS

Atributo Descripción
border-radius Atributo abreviado para establecer todos los cuatro atributos border-*-*-radius.
border-top-left-radius Definir la forma del borde superior izquierdo.
border-top-right-radius Definir la forma del borde superior derecho.
border-bottom-right-radius Definir la forma del borde inferior derecho.
border-bottom-left-radius Definir la forma del borde inferior izquierdo.