La propiedad border-right-style en CSS se usa para cambiar la apariencia del segmento de línea derecho del borde de un elemento.
Valor por defecto
- ninguna
Sintaxis:
border-right-style: none|hidden|dotted|dashed|solid|double|groove| ridge|inset|outset|inherit;
Valores de propiedad:
none: Es el valor predeterminado y hace que el ancho del borde derecho sea cero. Por lo tanto, no es visible.
- Sintaxis:
border-right-style: none;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-right-style */
border-right-style: none;
}
</style>
</head>
<body>
<!-- border-right-style:none; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
hidden: se utiliza para hacer que el borde derecho sea invisible, como none , excepto en caso de resolución de conflictos de borde de los elementos de la tabla.
- Sintaxis:
border-right-style: hidden;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-right-style */
border-right-style: hidden;
}
</style>
</head>
<body>
<!-- border-right-style:hidden; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
punteado: Se utiliza para hacer el borde derecho con una serie de puntos.
- Sintaxis:
border-right-style: dotted;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-right-style */
border-right-style: dotted;
}
</style>
</head>
<body>
<!-- border-right-style:dotted; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
punteado: Hace el borde derecho con una serie de segmentos de línea cortos.
- Sintaxis:
border-right-style: dashed;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-right-style */
border-right-style: dashed;
}
</style>
</head>
<body>
<!-- border-right-style:dashed; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
sólido: Se usa para hacer el borde derecho con un solo segmento de línea sólida.
- Sintaxis:
border-right-style: solid;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-right-style */
border-right-style: solid;
}
</style>
</head>
<body>
<!-- border-right-style:solid; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
double: Esta propiedad hace el borde derecho con una doble línea continua. El ancho del borde, en este caso, es igual a la suma de los anchos de los segmentos de dos líneas y el espacio entre ellos.
- Sintaxis:
border-right-style: double;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-right-style */
border-right-style: double;
}
</style>
</head>
<body>
<!-- border-right-style:double; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
ranura: Hace el borde derecho con un segmento de línea ranurada, lo que nos hace sentir que va hacia adentro.
- Sintaxis:
border-right-style: groove;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-right-style */
border-right-style: groove;
}
</style>
</head>
<body>
<!-- border-right-style:groove; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
recuadro: Hace el borde derecho con un segmento de línea incrustado, lo que nos hace sentir que está fijado profundamente en la pantalla.
- Sintaxis:
border-right-style: inset;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-right-style */
border-right-style: inset;
}
</style>
</head>
<body>
<!-- border-right-style:inset; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
comienzo: Es lo contrario de inserción . Hace el borde derecho con un segmento de línea, que parece estar saliendo.
- Sintaxis:
border-right-style: outset;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-right-style */
border-right-style: outset;
}
</style>
</head>
<body>
<!-- border-right-style:outset; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
heredar: hace que la propiedad de estilo de borde derecho se herede de su elemento principal.
- Sintaxis:
border-right-style: inherit;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-style Property
</title>
<!-- Internal CSS Style Sheet -->
<style>
body {
border-right-style: dashed;
}
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property | border-right-style */
border-right-style: inherit;
}
</style>
</head>
<body>
<!-- border-right-style: inherit; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
- Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad border-right-style se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Internet Explorer 5.5
- Firefox 1.0
- Ópera 9.2
- Safari 1.0