Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Bordi di un div tagliati

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2017
    Messaggi
    21

    Bordi di un div tagliati

    Ciao a tutti, ho un problema con i bordi di un div, come si vede gli angoli sono "tagliati" questo il mio codice:

    codice HTML:
    <div style="	width: 100%;	float: left;	border-left: green 20px solid;	border-top:#706F6D 10px solid;	border-bottom:#706F6D 10px solid;">Ciao a tutti  Ciao a tutti<br>Ciao a tutti  Ciao a tutti<br>Ciao a tutti  Ciao a tutti<br>Ciao a tutti  Ciao a tutti<br>Ciao a tutti  Ciao a tutti<br>Ciao a tutti  Ciao a tutti<br>	</div>
    Questo il risultato:
    ww.jpg

    Grazie infinite

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,609
    hai ereditato la proprietà border-style con valore inset e/o outset.
    se vuoi un bordo "normale" aggiungi border-style: solid; al tuo elemento

    https://www.w3schools.com/css/css_border.asp

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2017
    Messaggi
    21
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    hai ereditato la proprietà border-style con valore inset e/o outset.
    se vuoi un bordo "normale" aggiungi border-style: solid; al tuo elemento

    https://www.w3schools.com/css/css_border.asp
    Grazie per avermi risposto, io ho provato anche con il tuo suggerimento ma nulla.

    codice HTML:
    <div style="	border-style: solid; width:100%; border-left-color:crimson; border-left-style:solid;  border-left-width: 10px;   ">ciao	 </div>

  4. #4
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,609
    no... così' DEVE andare. inutile ripetere "border-left-style" in quanto implicito in "border-style"
    codice:
    <div style="border-style:solid; width:100%; border-left-color:crimson;  border-left-width:10px;">ciao</div>
    hai svuotato la cache del browser?
    Ultima modifica di Vincent.Zeno; 18-01-2018 a 17:25

  5. #5
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,609
    a no... (svista mia) se definisci colori diversi per i singoli bordi, all'incrocio di questi avrai sempre l'angolatura.

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Ciao, quoto Vincent, è un comportamento del tutto normale.

    Non è proprio chiaro ciò che vorresti ottenere ma azzardo una possibile soluzione con l'uso di box-shadow:
    codice:
    width: 100%;
    float: left;
    border: #706F6D solid;
    border-width: 10px 0;
    padding-left: 20px;
    box-shadow: inset 20px 0 green;
    box-sizing: border-box;
    Fai sapere.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Utente di HTML.it
    Registrato dal
    Jun 2017
    Messaggi
    21
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    no... così' DEVE andare. inutile ripetere "border-left-style" in quanto implicito in "border-style"
    codice:
    <div style="border-style:solid; width:100%; border-left-color:crimson;  border-left-width:10px;">ciao</div>
    hai svuotato la cache del browser?
    Provato anche in local ma nulla non funziona, rimane sempre quel difetto sugli angoli

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.