CSS
Frontière

Syntaxe

• frontière

• border: border-width border-style border-color | initiale | hériter;

• border-top: border-width style de bordure border-color | initiale | hériter;

• border-bottom: bordure-largeur style-bordure bordure-couleur | initiale | hériter;

• border-left: border-style border-style border-color | initiale | hériter;

• border-right: border-width style de bordure border-color | initiale | hériter;

• style de bordure

• style de bordure: 1-4 aucune | caché | pointillé | en pointillés | solide | double | rainure | crête | encart | début | initiale | hériter;

• rayon frontière

• rayon frontière: 1-4 longueur | % / 1-4 longueur | % | initiale | hériter;

• border-top-left-radius: longueur | % [longueur | %] | initiale | hériter;

• border-top-right-radius: longueur | % [longueur | %] | initiale | hériter;

• border-bottom-left-radius: longueur | % [longueur | %] | initiale | hériter;

• border-bottom-right-radius: longueur | % [longueur | %] | initiale | hériter;

• image-frontière

• border-image: border-image-source border-image-slice [bordure-image-largeur [bordure-image-sortie]] border-image-repeat

• border-image-source: aucune | image;

• border-image-slice: 1-4 nombre | pourcentage [remplir]

• border-image-repeat: 1-2 stretch | répéter | ronde | espace

• effondrement des frontières

• effondrement des frontières: séparé | effondrement initiale | hériter

Remarques

rayon frontière

La propriété border-radius vous permet de modifier la forme du modèle de boîte de base.

Chaque coin d'un élément peut avoir jusqu'à deux valeurs, pour le rayon vertical et horizontal de ce coin (pour un maximum de 8 valeurs).

Le premier ensemble de valeurs définit le rayon horizontal. Le deuxième ensemble de valeurs facultatif, précédé d'un '/', définit le rayon vertical. Si un seul jeu de valeurs est fourni, il est utilisé pour le rayon vertical et le rayon horizontal.

border-radius: 10px 5% / 20px 25em 30px 35em;

Le 10px est le rayon horizontal du haut à gauche et du bas à droite. Et le 5% est le rayon horizontal du haut à droite et du bas à gauche. Les quatre autres valeurs après '/' sont les rayons verticaux pour le haut à gauche, le haut à droite, le bas à droite et le bas à gauche.

Comme avec de nombreuses propriétés CSS, les raccourcis peuvent être utilisés pour toutes les valeurs possibles. Vous pouvez donc spécifier de 1 à 8 valeurs. Le raccourci suivant vous permet de définir le rayon horizontal et vertical de chaque coin sur la même valeur:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Le rayon de bordure est le plus souvent utilisé pour convertir des éléments de boîte en cercles. En définissant le rayon de la bordure sur la moitié de la longueur d'un élément carré, un élément circulaire est créé:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Comme le paramètre border-radius accepte des pourcentages, il est courant d'utiliser 50% pour éviter de calculer manuellement la valeur border-radius:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Si les propriétés de largeur et de hauteur ne sont pas égales, la forme résultante sera un ovale plutôt qu'un cercle.

Exemple de bordure-rayon spécifique au navigateur:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

style de bordure

La propriété border-style définit le style de la bordure d'un élément. Cette propriété peut avoir de une à quatre valeurs (pour chaque côté de l'élément une valeur.)

Exemples:

border-style: dotted;

border-style: dotted solid double dashed;

border-style peut également avoir les valeurs none et hidden . Ils ont le même effet, à l'exception hidden travaux hidden pour la résolution des conflits de bordure pour les éléments <table> . Dans une <table> avec plusieurs bordures, none possède la priorité la plus faible (signifiant un conflit, la bordure le montrerait) et la priorité la plus élevée est hidden (ce qui signifie que la bordure ne s'affiche pas dans un conflit).

frontière (sténographie)

Dans la plupart des cas, vous souhaitez définir plusieurs propriétés de bordure ( border-width , border-style et border-color ) pour tous les côtés d'un élément.

Au lieu d'écrire:

border-width: 1px;
border-style: solid;
border-color: #000;

Vous pouvez simplement écrire:

border: 1px solid #000;

Ces raccourcis sont également disponibles pour chaque côté d'un élément: border-top , border-left , border-right et border-bottom . Donc, vous pouvez faire:

border-top: 2px double #aaaaaa;

image-frontière

Avec la propriété border-image , vous avez la possibilité de définir une image à utiliser à la place des styles de bordure normaux.

Une border-image consiste essentiellement en un

• border-image-source : le chemin de l'image à utiliser
• border-image-slice : spécifie le décalage utilisé pour diviser l'image en neuf régions (quatre coins , quatre arêtes et un centre )
• border-image-repeat : Spécifie comment les images pour les côtés et le milieu de l'image de la bordure sont mises à l'échelle.

Prenons l’exemple suivant: borderas.png est une image de 90x90 pixels:

border-image: url("border.png") 30 stretch;

L'image sera divisée en neuf régions de 30x30 pixels. Les bords seront utilisés comme coins de la bordure tandis que le côté sera utilisé entre les deux. Si l'élément est plus haut / plus large que 30px, cette partie de l'image sera étirée . La partie centrale de l'image est par défaut transparente.

border- [left | right | top | bottom]

La propriété border-[left|right|top|bottom] est utilisée pour ajouter une bordure à un côté spécifique d'un élément.

Par exemple, si vous souhaitez ajouter une bordure à la gauche d'un élément, vous pouvez faire:

#element {
    border-left: 1px solid black;
}

effondrement des frontières

La propriété border-collapse s'applique uniquement aux table (et aux éléments affichés sous la forme display: table ou inline-table ) et définit si les bordures du tableau sont réduites en une seule bordure ou détachées comme dans le code HTML standard.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Voir aussi Tableaux - Entrée de la documentation border-collapse

Frontières multiples

Utiliser le contour:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

En utilisant box-shadow:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Utiliser un pseudo-élément:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Créer une bordure multicolore en utilisant border-image

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

L'exemple ci-dessus produirait une bordure composée de 5 couleurs différentes. Les couleurs sont définies par un linear-gradient (vous pouvez trouver plus d'informations sur les dégradés dans les documents ). Vous pouvez trouver plus d'informations sur la propriété border-image-slice dans l' exemple border-image dans la même page.

( Remarque: des propriétés supplémentaires ont été ajoutées à l'élément à des fins de présentation. )

Vous auriez remarqué que la bordure gauche n'a qu'une seule couleur (la couleur de départ du dégradé) alors que la bordure droite ne comporte qu'une seule couleur (la couleur de fin du dégradé). Cela est dû à la façon dont la propriété image frontière fonctionne. C'est comme si le dégradé était appliqué à la boîte entière et que les couleurs étaient masquées à partir des zones de remplissage et de contenu, donnant ainsi l'impression que seule la bordure est dégradée.

La ou les bordures d'une seule couleur dépendent de la définition du dégradé. Si le dégradé est un dégradé de to right , la bordure gauche correspond à la couleur de début du dégradé et la bordure droite correspond à la couleur de fin. Si c'était un dégradé du to bottom la bordure supérieure serait la couleur de départ du dégradé et la bordure du bas serait la couleur de fin. Ci - dessous, la sortie d'un to bottom en to bottom 5 gradient de couleur.

Si la bordure est requise uniquement sur des côtés spécifiques de l'élément, la propriété border-width peut être utilisée comme avec toute autre bordure normale. Par exemple, l'ajout du code ci-dessous produirait une bordure uniquement en haut de l'élément.

border-width: 5px 0px 0px 0px;

Notez que tout élément qui possède border-image propriété border-image ne respectera pas le border-radius (c'est-à-dire que la bordure ne sera pas courbe). Ceci est basé sur la déclaration ci-dessous dans la spécification:

Les arrière-plans d'une boîte, mais pas sa bordure-image, sont découpés dans la courbe appropriée (comme déterminé par "background-clip").