Saltar navegación

Bordes

CSS permite modificar o aspecto de cada un dos catro bordes dun elemento HTML. Para cada borde pódese establecer a súa anchura ou grosor, a súa cor, o seu estilo e a partir de CSS3 o seu radio de curvatura.

Velaquí as propiedades que temos para engadir bordes as etiquetas:

PropiedadeValores que aceptaDescriciónExemplos
  • border-color
  • border-right-color
  • border-left-color
  • border-top-color
  • border-bottom-color
 Calquera cor Establece unha cor de todos os bordes, ou o cor de cada un deles (arriba, abaixo, esquerda e dereita). Para que funcione é necesario establecer un ancho de borde (border-width) e un estilo de borde (border-style) 
p { border-color: yellow; }

h1 { 
border-right-color: #fb3; 
border-left-color: #fb3;
border-top-color: #a0f;
border-bottom-color: #a57;
}










    

  • border-width
    • 

  • border-right-width
    • 

  • border-left-width
    • 

  • border-top-width
    • 

  • border-bottom-width
    • 



Unidade de Medida


Establece un ancho común a todos os bordes, ou o ancho de cada un deles (arriba, abaixo, esquerda e dereita). Para que funcione é necesario establecer un color de borde (border-color) e un estilo de borde (border-style)






p { border-width: 2px; }




h1 { 
border-right-width: 2px; 
border-left-width: 2px;
border-top-width: 4px;
border-bottom-width: 5px;
}












    

  • border-style
    • 

  • border-right-style
    • 

  • border-left-style
    • 

  • border-top-style
    • 

  • border-bottom-style
    • 





    

  • none (sen borde)
    • 

  • dotted (borde punteado)
    • 

  • dashed (borde con guións)
    • 

  • solid (borde lineal dunha única cor)
    • 

  • double (borde double dunha única cor)
    • 

  • groove (borde ranurado)
    • 

  • ridge (borde encrestado)
    • 

  • inset (borde ranurado con máis profundidade)
    • 

  • outset (borde encrestado con máis profundidade)
    • 





Establece un estilo común a todos os bordes, ou o estilo de cada un deles (arriba, abaixo, esquerda e dereita). Para que funcione é necesario establecer un color de borde (border-color) e un ancho de borde (border-width)






p { border-style: solid; }




h1 { 
border-right-style: inset; 
border-left-style: dotted;
border-top-style: solid;
border-bottom-style: dashed;
}












    

  • border-radius
    • 

  • border-top-right-radius
    • 

  • border-top-left-radius
    • 

  • border-bottom-left-radius
    • 

  • border-bottom-right-radius
    • 








A partir da versión CSS3. Establece un radio de curvatura común a todos os bordes, ou o radio de cada un deles (arriba esquerda, arriba dereita, abaixo esquerda e abaixo dereita). Para que funcione é necesario establecer un color de borde (border-color), un ancho de borde (border-width) e un estilo de borde (border-style)






p { border-radius: 2px; }




h1 { 
border-top-right-radius: 2px 4px; 
border-top-left-radius: 2px 2px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 5px;
}










border


Ancho Estilo do borde Calquera cor




Establece a anchura, o estilo do borde (emprega os mesmos valores que border-style) e a súa cor nunha soa liña. 






p { border: 2px solid #fb3; }




h1 { 
border: 5px dotted rgb(23, 45, 67);
}






















Exemplo...








Exemplo das propiedades de bordes


Exemplo das propiedades de bordes. Diego Rodicio Álvarez. CC BY-SA


Pulsa no botón de abaixo para descargar este exemplo: