immagini con angoli arrotondati e bordo

**HammerFist** · 23-04-2016, 17:41

Salve, è possibile tramite css inserire degli angoli arrotondati su una immagine
il tutto con un bordo di 5px con colore ?
ho visto che si possono fare gli angoli e che si possono mettere i bordi
ma non entrembi insieme

**KillerWorm** · 23-04-2016, 18:34

Ciao

è possibile tramite css inserire degli angoli arrotondati su una immagine
il tutto con un bordo di 5px con colore ?

Certo che sì.

ho visto che si possono fare gli angoli e che si possono mettere i bordi
ma non entrembi insieme

Guarda meglio.

Alla tua immagine puoi applicare una cosa del genere:

codice:

border: 5px solid red;
border-radius: 20px;

**HammerFist** · 23-04-2016, 20:38

mi ero dimenticato che il bordo mi servirebbe interno alla foto in modo che il bordo copra i bordi della foto... dici che è possibile, mantenendo la curvatura degli angoli?

**KillerWorm** · 24-04-2016, 00:04

mi ero dimenticato che il bordo mi servirebbe interno alla foto in modo che il bordo copra i bordi della foto...

A beh, un piccolo dettaglio.. come dimenticarsi di mettere i tuorli dell'uovo quando si fa lo zabaione.

dici che è possibile, mantenendo la curvatura degli angoli?

Io dico di sì.

La soluzione più immediata è quella di croppare la tua immagine preventivamente con un programma di grafica o con un qualche tool anche online.

In alternativa, qui una soluzione col CSS ma è necessario inserire l'immagine in un contenitore:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .imgbox{
        border: 5px solid red;
        border-radius: 20px;
        overflow: hidden;
        display: inline-block;
      }
      .imgbox>img{
        margin: -5px;
      }
    </style>
  </head>
  <body>
    <span class="imgbox"><img src="tuaimmagine.qcs" alt=""></span>
  </body>
</html>

**HammerFist** · 24-04-2016, 09:34

Grazie

Originariamente inviata da KillerWorm

A beh, un piccolo dettaglio.. come dimenticarsi di mettere i tuorli dell'uovo quando si fa lo zabaione.

Io dico di sì.

La soluzione più immediata è quella di croppare la tua immagine preventivamente con un programma di grafica o con un qualche tool anche online.

In alternativa, qui una soluzione col CSS ma è necessario inserire l'immagine in un contenitore:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .imgbox{
        border: 5px solid red;
        border-radius: 20px;
        overflow: hidden;
        display: inline-block;
      }
      .imgbox>img{
        margin: -5px;
      }
    </style>
  </head>
  <body>
    <span class="imgbox"><img src="tuaimmagine.qcs" alt=""></span>
  </body>
</html>

Discussione: immagini con angoli arrotondati e bordo

Strumenti discussione

Ricerca discussione

Visualizza

immagini con angoli arrotondati e bordo

Permessi di invio