HTML | Estilo DOM borderTopRightRadius Propiedad

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 Cancelar la respuesta