W3docs
es
Iniciar sesión

Propiedad stroke-linecap de CSS

How to use the stroke-linecap CSS property to specify the start and end points of element’s border. Read about the property and see values.

La propiedad stroke-linecap especifica la forma de los remates en los extremos del trazo de un camino en SVG.

Cuando se usa como un atributo de presentación, puede ser sobrescrito por CSS. Cuando se usa en estilos en línea, tiene prioridad sobre el CSS externo.

info

La propiedad stroke-linecap puede usarse tanto como propiedad CSS como como atributo de presentación de SVG. Se puede aplicar a cualquier elemento, pero solo afecta a los siguientes: <altGlyph>, <path>, <polyline>, <line>, <text>, <textPath>, <tref> y <tspan>.

Valor inicialbutt
Se aplica aElementos de formas y contenido de texto.
HeredableSí.
AnimableNo.
VersiónEspecificación SVG 1.1
Sintaxis DOMObject.strokeLinecap = "round";

Sintaxis

Sintaxis CSS de stroke-linecap

stroke-linecap: butt | square | round | initial | inherit;

Ejemplo de la propiedad stroke-linecap:

Ejemplo de código CSS de stroke-linecap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Valor redondeado de stroke-linecap en CSS

Ejemplo de la propiedad stroke-linecap con el valor "round":

Ejemplo de stroke-linecap round en CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "round" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
      <!-- Effect of the "round" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
      <!--
      the following pink lines highlight the
      position of the path for each stroke
      -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad stroke-linecap con el valor "square":

Ejemplo de stroke-linecap square en CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripción
buttTermina el trazo con un ángulo agudo. En un subcamino de longitud cero, el camino no se renderizará. Este es el valor predeterminado.
squareExtiende el trazo más allá de la longitud del camino.
roundHace que los puntos de inicio y fin sean redondeados.
initialPalabra clave estándar de CSS que restablece la propiedad a su valor predeterminado.
inheritPalabra clave estándar de CSS que hereda la propiedad de su elemento padre.

Práctica

Práctica

¿Qué afecta la propiedad 'stroke-linecap' en CSS?