InMy.Live

À propos d’un code

Image de bordure animée

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Bordure dégradée partielle

Bordure dégradée partielle entourant une image circulaire, réalisée avec un dégradé conique CSS et un masque de dégradé radial.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Bordure dégradée avec coins arrondis

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Bordure d’arrière-plan

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordures à motifs

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordure pointillée personnalisée

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Bordure colorée

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Effet de bordure dégradé

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordure dégradée + fond transparent

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Bordure Linéaire-Dégradé + Bordure-Rayon

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Bordure d’angle uniquement

Bordure en coin uniquement (permet l’arrondi des coins et la bordure dégradée).

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

image de bordure 8 bits

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordure de pixels 8 bits

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Effet de bordure d’avatar. 15 déclarations, 1 élément, pas de pseudos

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Utilisez SVG pour border-image

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordures dégradées CSS

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordures et dégradés

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Plusieurs valeurs de rayon de bordure

Vous saviez probablement que vous pouviez régler le border-radius d’un élément à 4 valeurs, et en utilisant la sténographie, il va dans le sens des aiguilles d’une montre du haut, de la droite, du bas, de la gauche. Mais saviez-vous que vous pouvez en fait définir jusqu’à 8 valeurs si vous les séparez ? Chaque coin peut avoir 2 valeurs comme vous pouvez le voir dans cet exemple.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordure CSS Candy Stripe à l’aide de Clip-Path

Créez une bordure de bande de bonbons réactive à l’aide de l’outil clip-path propriété sur chacun des éléments de la liste dans un ul. Modifiez très facilement la hauteur, la couleur d’arrière-plan et la couleur des rayures.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Décalage et cadre XOR : animé

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Cadre vintage plein écran avec plusieurs bordures

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : bootstrap.css

À propos d’un code

Bordure dégradée

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Motifs de bordure circulaire CSS purs

Les motifs de bordure sont créés avec clip-path sur un pseudo-élément.

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos d’un code

Image de bordure ajustée en toute simplicité

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordure inspirée de la carte

Effet de bordure inspiré de la carte utilisant empilé border & box-shadows. Élément HTML unique avec CSS.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos d’un code

Bordure floue

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : –

À propos du code

Frontières magiques

Essayez d’avoir un tableau dynamique et réactif qui n’a de bordures qu’entre les cellules.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordure de bouton interactif

Bouton avec un dégradé de bordure interactif.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordure dégradée

HTML et CSS bordure dégradée sans pseudo éléments.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Côté arrondi

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordure animée au survol

Carte avec Animé gauche frontière en vol stationnaire.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos d’un code

Effets de survol de la boîte de devis CSS

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Oui

Dépendances : font-awesome.css

À propos d’un code

SVG comme image de bordure pour les formes de coin arbitraires avec ombre

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Sensible: Non

Dépendances : –

À propos du code

Bordure sommaire

Utilisation de 8 border-radius les valeurs peuvent être assez dope. Cet exemple montre comment l’utiliser sur l’élément et son ::before le pseudo-élément peut créer un aspect sommaire.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordures CSS Gradient Clip-Path

Cet exemple montre comment le CSS clip-path La propriété peut être utilisée pour créer une variété de bordures dégradées en forme.

Navigateurs compatibles : Chrome, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordures arrondies dégradées CSS

Cet exemple montre comment Dégradés CSS peut s’appliquer à un bordure arrondie.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Encart de bordure

Essayer d’atteindre un bordure incrustée effet autour d’un bloc de texte.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Boîte à bordure fantaisie

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Effets de bordure dessinés à la main

Une seule ligne border-radius technique.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordure déchiquetée

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordures 8 bits utilisant des ombres

bordures 8 bits en utilisant plusieurs ombres CSS3 et un peu de Sass.

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Bordure de style bande dessinée

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –

À propos du code

Armure à rayon de bordure

Navigateurs compatibles : Chrome, Edge, Firefox, Opéra, Safari

Dépendances : –