CSS | propiedad -moz-outline-radius

La propiedad -moz-outline-radius se usa para especificar el radio de un contorno. Se utiliza para dar esquinas redondeadas a los contornos. Esta propiedad solo se admite en Firefox.

Sintaxis:

-moz-outline-radius: <length> {1-4} 
| <percentage> (1-4} | initial | inherit

Valores de propiedad:

longitud: Esto se utiliza para establecer el radio del contorno en unidades de longitud. El valor predeterminado de esta propiedad es 0.
El valor se puede especificar en 4 formatos.

Cuando se especifica un valor, el radio se aplicaría a todas las esquinas del elemento.
Cuando se especifican dos valores, el primero se aplica a las esquinas superior izquierda e inferior derecha y el segundo valor se aplica a las esquinas superior izquierda e inferior derecha.
Cuando se especifican tres valores, el primero se aplica a la esquina superior izquierda, el segundo se aplica a las esquinas superior derecha e inferior izquierda y el tercero se aplica a la esquina inferior derecha.
Cuando se especifican cuatro valores, el primero se aplica a la esquina superior izquierda, el segundo se aplica a la esquina superior derecha, el tercero se aplica a la esquina inferior derecha y el cuarto se aplica a la esquina inferior izquierda.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>
    -moz-outline-radius property
  </title>
  <style>
    .elem-1 {
      outline: dotted;
      -moz-outline-radius: 5px;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  
    .elem-2 {
      outline: dotted;
      -moz-outline-radius: 5px 50px;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  
    .elem-3 {
      outline: dotted;
      -moz-outline-radius: 5px 50px 20px;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  
    .elem-4 {
      outline: dotted;
      -moz-outline-radius: 5px 50px 20px 100px;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    -moz-outline-radius
  </b>
  <div class="elem-1">
    This div has an outline-radius
    of 5px.
  </div>
  <div class="elem-2">
    This div has an outline-radius
    of 5px 50px.
  </div>
  <div class="elem-3">
    This div has an outline-radius
    of 5px 50px 20px.
  </div>
  <div class="elem-4">
    This div has an outline-radius
    of 5px 50px 20px 100px;
  </div>
</body>
</html>

Producción:
length

porcentaje: Esto se utiliza para establecer el radio del contorno en valores porcentuales. Los valores se aplican en un formato similar al de los valores de longitud. El valor predeterminado de esta propiedad es 0.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>
    -moz-outline-radius property
  </title>
  <style>
    .elem-1 {
      outline: dotted;
      -moz-outline-radius: 10%;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  
    .elem-2 {
      outline: dotted;
      -moz-outline-radius: 10% 50%;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  
    .elem-3 {
      outline: dotted;
      -moz-outline-radius: 10% 50% 25%;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  
    .elem-4 {
      outline: dotted;
      -moz-outline-radius: 10% 50% 25% 75%;
  
      width: 300px;
      padding: 20px;
      margin: 15px;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    -moz-outline-radius
  </b>
  <div class="elem-1">
    This div has an outline-radius
    of 10%.
  </div>
  <div class="elem-2">
    This div has an outline-radius
    of 10% 50%.
  </div>
  <div class="elem-3">
    This div has an outline-radius
    of 10% 50% 25%.
  </div>
  <div class="elem-4">
    This div has an outline-radius
    of 10% 50% 25% 75%;
  </div>
</body>
</html>

Producción:
percentage

initial: Esto se usa para establecer la propiedad en su valor predeterminado.
heredar: Esto se usa para heredar la propiedad de su padre.

Navegadores compatibles: los navegadores compatibles con la propiedad -moz-outline-radius se enumeran a continuación:

Firefox 1.5

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta