Cambiare l'ordine di sovrapposizione dei bordi negli angoli

**hama** · 04-04-2010, 10:28

Ciao a tutti, sono nuovo del forum e di HTML/CSS in generale.
Volevo chiedere questa cosa che non riesco a trovare da nessuna parte, probabilmente perché sono un newbie.

Quello che volevo fare è semplicemente cambiare l'ordine con cui normalmente si sovrappongono i bordi di un box negli angoli (cosa che si nota solo quando i colori sono diversi).
Per esempio con un codice del tipo

border-left: 1px solid red;
border-top: 1px solid black;

i bordi vengono disegnati così:

codice:

  __________________
  __________________ black 
  |  |        
  |  |     
  |  |     
  |  |  <-- red
  |  |
  |  |

Quello che vorrei è semplicemente che fossero disegnati così:

codice:

      __________________        
  |  |__________________ black      
  |  |     
  |  |  <-- red
  |  |
  |  |

Sicuramente è una cosa stupida, ma, abbiate pazienza, non riesco a trovare una risposta.
Dove posso cercare?
Grazie.

**miki003** · 04-04-2010, 15:29

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#bordo {
	border-top-width: 10px;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #000;
}
-->
</style>
</head>

<body>
<div id="bordo">Inserire qui il contenuto</div>
</body>
</html>

**hama** · 04-04-2010, 16:30

Ciao miki003 e grazie per la risposta.
Con il tuo codice, ponendo a 1px lo spessore dei bordi, il problema si nota nell'angolo inferiore sinistro (o nel superiore destro).
Nell'immagine qui sotto c'è il risultato del tuo codice e quello che vorrei ottenere (operando direttamente sui bordi del box e senza aggiungere box che contengono il box in questione):

In particolare posso ottenere la sovrapposizione che cerco se cambio il colore del bordo superiore da nero a rosso, ma è una cosa di cui non ho il controllo. Se volessi lasciarlo con i colori che hai impostato tu, come posso cambiare la sovrapposizione nell'angolo in basso a sinistra?

**softhare** · 04-04-2010, 19:44

Devi usare due o più div.
Ad sempio in quello esterno setti il bordo nero per top e left; in quello interno setti il bordo rosso per right e bottom...

**hama** · 04-04-2010, 20:30

Originariamente inviato da softhare
Devi usare due o più div.
Ad sempio in quello esterno setti il bordo nero per top e left; in quello interno setti il bordo rosso per right e bottom...

Allora non trovavo come si fa perché non si può fare (senza l'aggiunta di un box esterno) :-).
Pensavo che dipendesse in qualche modo dall'ordine con cui sono scritti i bordi nel codice, ma con l'aggiunta di qualche proprietà che non conoscevo (altrimenti semplicemente invertendo l'ordine non cambiava nulla).

Grazie mille per l'informazione.

**miki003** · 04-04-2010, 21:39

Il risultato del mio codice non è quello della tua immahine ma è questo

**hama** · 04-04-2010, 22:53

Originariamente inviato da miki003
Il risultato del mio codice non è quello della tua immahine ma è questo

Infatti, ma come ho scritto nel mio post seguente al tuo, impostando nel tuo codice lo spessore dei bordi a 1px invece di 10px, si ottiene l'immagine che ho postato (ingrandita per vedere meglio il problema).

lo spessore del bordo che mi serve è 1px ed è solo in quel caso che nasce il problema altrimenti, come si vede dalla tua immagine, i raccordi tra i bordi vengono smussati e il problema non si pone.

Quindi credo anche di avere capito che se non si vogliono i raccordi smussati (quando i bordi hanno spessore maggiore di 1px), occorre usare due o più "div" uno dentro l'altro e impostare i bordi di uno o dell'altro a seconda di quello che si vuole ottenere.

Grazie ancora.

**miki003** · 04-04-2010, 23:15

Questo è settato a 1px

**hama** · 05-04-2010, 00:22

Originariamente inviato da miki003
Questo è settato a 1px

Allora c'è qualche cosa che non capisco o che non mi torna.
Dall'immagine del tuo ultimo post io ricavo questo:

e lo spessore del bordo non mi sembra 1px specie confrontando con altri elementi dei caratteri e con il fatto che la scalettatura del raccordo del bordo deve per forza essere fatta di pixel e, ad occhio e croce, mi sembra che ce ne siano almeno 4.

Per evitare fraintendimenti, il bordo che serve a me deve essere di un solo pixel (per intendersi il codice che hai scritto tu, tale e quale, ma sostituendo 10px con 1px) e non doppio bordo o qualche cosa di diverso.

**miki003** · 05-04-2010, 00:30

Se ti ho detto che è un pixel vuol dire che è 1px, non avrei nessun motivo per dire cavolate ti sembra?

Se a te non risulta avrai qualche cosa di sbagliato o una risoluzione inferiore che ne so?

Discussione: Cambiare l'ordine di sovrapposizione dei bordi negli angoli

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare l'ordine di sovrapposizione dei bordi negli angoli

Permessi di invio