• Bordure intérieure

    J'ai abordé, dans la page précédent, une autre façon de créer des bordures intérieures: pour cela, il faut superposer un cadre vide avec bordure et ombre éventuellement, au dessus de l'image.

    La forme de l'image sera la forme du cadre superposé, en n'oubliant pas d'incorporer la bordure de ce dernier dans ses dimensions hors-tout, pour bien le centrer (box-sizing:border-box).

    Vous pouvez ainsi créer des formes rondes, ovales ou "patatoïdes".

     

    <div style="width: 40vw; height: 40vw; border: 0.6vh solid black; border-radius: 50%; margin: 1vh auto; background: url('http://ekladata.com/2AX4z5PDJXbIkpSofh059HuLtMM.jpg'); background-size: cover; background-position: 50%;">
    <p style="box-sizing: border-box; width: 35vw; height: 35vw; border-radius: 50%; border: 0.4vw double white; transform: translate(2.5vw,2.5vw); box-shadow: 0vw 0vw 2vw 1vw white;">&nbsp;</p>
    </div>

     

    <div style="width: 60vw; height: 33.75vw; border: 0.6vh solid black; border-radius: 50%; margin: 1vh auto; background: url('http://ekladata.com/2AX4z5PDJXbIkpSofh059HuLtMM.jpg'); background-size: cover; background-position: 50%;">
    <p style="box-sizing: border-box; width: 55vw; height: 28.75vw; border-radius: 50%; border: 0.4vw double white; transform: translate(2.5vw,2.5vw); box-shadow: 0vw 0vw 2vw 1vw white;">&nbsp;</p>
    </div>

     

    <div style="width: 40vw; height: 40vw; border: 0.6vh solid black; border-radius: 20% 50% 10% 30%; margin: 1vh auto; background: url('http://ekladata.com/2AX4z5PDJXbIkpSofh059HuLtMM.jpg'); background-size: cover; background-position: 50%;">
    <p style="box-sizing: border-box; width: 35vw; height: 35vw; border-radius: 20% 50% 10% 30%; border: 0.4vw double white; transform: translate(2.5vw,2.5vw); box-shadow: 0vw 0vw 2vw 1vw white;">&nbsp;</p>
    </div>

     

    <div style="width: 40vw; height: 40vw; border: 0.6vh solid black; border-top-left-radius: 5vw 5vw; border-top-right-radius: 20vw 10vw; border-bottom-right-radius: 10vw 2vw; border-bottom-left-radius: 15vw 10vw; margin: 1vh auto; background: url('http://ekladata.com/2AX4z5PDJXbIkpSofh059HuLtMM.jpg'); background-size: cover; background-position: 50%;">
    <p style="box-sizing: border-box; width: 35vw; height: 35vw; border-top-left-radius: 5vw 5vw; border-top-right-radius: 20vw 10vw; border-bottom-right-radius: 10vw 2vw; border-bottom-left-radius: 15vw 10vw; border: 0.4vw double white; transform: translate(2.5vw,2.5vw); box-shadow: 0vw 0vw 2vw 1vw white;">&nbsp;</p>
    </div>

    Ceci pour rappeler que vous pouvez donner un arrondi différent à chaque angle et même à donner des arrondis irréguliers, en donnant 2 valeurs à chaque angle (verticale/horizontale) en les paramétrant individuellement.