HTML | Estilo DOM borderTopRightRadius Propiedad

Posted on by Rudeus Greyrat

La propiedad DOM Style borderTopRightRadius se utiliza para establecer o devolver el radio del borde superior derecho de un elemento .

Sintaxis:

  • Para obtener la propiedad borderTopRightRadius 
    object.style.borderTopRightRadius
  • Para establecer la propiedad borderTopRightRadius 
    object.style.borderTopRightRadius = "length | percentage | 
initial | inherit"

Valores devueltos: Devuelve un valor de string, que representa la propiedad border-top-right-radius de un elemento.

Valores de propiedad:

  • longitud: Esto se utiliza para definir el radio en unidades de longitud fija. Se pueden utilizar dos valores para especificar los radios del cuarto de elipse, siendo el primer valor el radio horizontal y el segundo valor el radio vertical.

    Ejemplo-1: Uso de un valor para especificar el radio.

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderTopRightRadius
        </title>
      
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderTopRightRadius
        </b>
        <p class="elem">
          GeeksforGeeks is a computer science 
          portal with a huge variety of well 
          written and explained computer science
          and programming articles, quizzes and 
          interview questions.
        </p>
        <button onclick="changeRadius()">
          Change borderTopRightRadius
        </button>
      
        <!-- Script to change borderTopRightRadius -->
        <script>
            function changeRadius() {
                elem = document.querySelector('.elem');
                elem.style.borderTopRightRadius = '30px';
            }
        </script>
    </body>
      
    </html>

    Producción:

    Antes de hacer clic en el botón:

    fijo-uno-antes

    Después de hacer clic en el botón:

    fijo-uno-después

    Ejemplo-2: Uso de dos valores para especificar el radio.

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderTopRightRadius
        </title>
      
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderTopRightRadius
      </b>
        <p class="elem">
          GeeksforGeeks is a computer science
          portal with a huge variety of well written
          and explained computer science and
          programming articles, quizzes and
          interview questions.
        </p>
        <button onclick="changeRadius()">
          Change borderTopRightRadius
        </button>
      
        <!-- Script to change borderTopRightRadius -->
        <script>
            function changeRadius() {
                elem = document.querySelector('.elem');
                elem.style.borderTopRightRadius = '10px 30px';
            }
        </script>
    </body>
      
    </html>

    Producción:

    Antes de hacer clic en el botón:

    fijo-dos-antes

    Después de hacer clic en el botón:

    fijo-dos-después

  • porcentaje: Esto se utiliza para definir el radio en unidades de porcentaje. Se pueden usar dos valores para especificar los radios del cuarto de elipse, el primer valor es el radio horizontal, que es el porcentaje del ancho del cuadro del borde, y el segundo valor es el radio vertical, que es el porcentaje de la altura del borde. -caja.

    Ejemplo-3: Uso de un valor para especificar el radio.

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderTopRightRadius
        </title>
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderTopRightRadius
        </b>
        <p class="elem">
          GeeksforGeeks is a computer science 
          portal with a huge variety of well 
          written and explained computer science
          and programming articles, quizzes and
          interview questions.
        </p>
        <button onclick="changeRadius()">
          Change borderTopRightRadius
        </button>
      
        <!-- Script to change borderTopRightRadius -->
        <script>
            function changeRadius() {
                elem = document.querySelector('.elem');
                elem.style.borderTopRightRadius = '20%';
            }
        </script>
    </body>
      
    </html>

    Producción:

    Antes de hacer clic en el botón:

    porcentaje-uno-antes

    Después de hacer clic en el botón:

    porcentaje-uno-después

    Ejemplo-4: Uso de dos valores para especificar el radio.

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderTopRightRadius
        </title>
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderTopRightRadius
        </b>
        <p class="elem">
          GeeksforGeeks is a computer science portal
          with a huge variety of well written and 
          explained computer science and programming 
          articles, quizzes and interview questions.
        </p>>
        <button onclick="changeRadius()">
          Change borderTopRightRadius
        </button>
      
        <!-- Script to change borderTopRightRadius -->
        <script>
            function changeRadius() {
                elem = document.querySelector('.elem');
                elem.style.borderTopRightRadius = '10% 50%';
            }
        </script>
    </body>
      
    </html>

    Producción:

    Antes de hacer clic en el botón:

    porcentaje-dos-antes

    Después de hacer clic en el botón:

    porcentaje-dos-después

  • initial: se utiliza para establecer esta propiedad en su valor predeterminado.

    Ejemplo-5:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderTopRightRadius
        </title>
        <style>
            .elem {
                padding: 10px;
                border-style: solid;
                border-top-right-radius: 20px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderTopRightRadius
        </b>
        <p class="elem">
          GeeksforGeeks is a computer science 
          portal with a huge variety of well 
          written and explained computer science
          and programming articles, quizzes and 
          interview questions.
        </p>
        <button onclick="changeRadius()">
          Change borderTopRightRadius
        </button>
      
        <!-- Script to change borderTopRightRadius -->
        <script>
            function changeRadius() {
                elem = document.querySelector('.elem');
                elem.style.borderTopRightRadius = 'initial';
            }
        </script>
    </body>
      
    </html>

    Producción:

    Antes de hacer clic en el botón:

    inicial-antes

    Después de hacer clic en el botón:

    inicial-después

  • heredar: Esto hereda la propiedad de su padre.

    Ejemplo-6:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
          DOM Style BorderTopRightRadius
        </title>
      
        <style>
            #parent {
                padding: 10px;
                border-style: solid;
                /* Setting the borderTopRightRadius of the parent */
                border-top-right-radius: 30px;
            }
              
            .elem {
                padding: 10px;
                border-style: solid;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        <b>
          DOM Style BorderTopRightRadius
        </b>
        <br>
        <br>
        <div id="parent">
            <p class="elem">
              GeeksforGeeks is a computer science
              portal with a huge variety of well
              written and explained computer 
              science and programming articles,
              quizzes and interview questions.
            </p>
        </div>
        <br>
        <button onclick="changeRadius()">
          Change borderTopRightRadius
        </button>
      
        <!-- Script to change borderTopRightRadius -->
        <script>
            function changeRadius() {
                elem = document.querySelector('.elem');
                elem.style.borderTopRightRadius = 'inherit';
            }
        </script>
    </body>
      
    </html>

    Producción:

    Antes de hacer clic en el botón:

    heredar-antes

    Después de hacer clic en el botón:

    heredar después

Navegadores compatibles: los navegadores compatibles con la propiedad borderTopRightRadius se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • safari de manzana
  • Ópera

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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *