Description

La propriété générique border vous permet de définir simultanément l'épaisseur, le style et la couleur de la bordure autour d'un élément. Les valeurs peuvent être dans n'importe quel ordre, séparées par un espace ; le navigateur déterminera lui-même laquelle d'entre elles correspond à la propriété souhaitée. Pour définir une bordure uniquement sur certains côtés d'un élément, utilisez les propriétés border-top , border-bottom , border-left et border-right .

Syntaxe

Valeurs

La valeur border-width détermine l’épaisseur de la bordure.

Plusieurs valeurs de style de bordure sont fournies pour contrôler son apparence.

Leurs noms et le résultat de l'action sont présentés dans la Fig. 1.

Figure 1. Styles de cadre

border-color définit la couleur de la bordure, la valeur peut être dans n'importe quel format autorisé par CSS.

frontière

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Cet exemple ajoute une double bordure autour du calque. Le résultat est présenté sur la Fig. 2.

Riz. 2. Application de la propriété border

Modèle objet

document.getElementById("elementID ").style.border

Navigateurs

Le navigateur Internet Explorer jusqu'à la version 6 incluse s'affiche en pointillés avec une épaisseur de bordure de 1 px. Avec une épaisseur de 2px et plus, la valeur pointillée fonctionne correctement. Ce bug est corrigé dans IE7, mais uniquement pour toutes les bordures de 1 px. Si l'une des bordures du bloc a une épaisseur de 2 pixels ou plus, alors dans IE7, la valeur pointillée se transforme en pointillés.

Les versions d'Internet Explorer jusqu'à la version 7.0 incluse ne prennent pas en charge la valeur d'héritage.

Le style de bordure peut varier légèrement d'un navigateur à l'autre lors de l'utilisation de valeurs groove , ridge , inset ou outset .

Vous pouvez spécifier un style de bordure sur un seul côté d'un élément. Pour ce faire, utilisez les propriétés border-top (bordure supérieure), border-right (bordure droite), border-bottom (bordure inférieure), border-left (bordure gauche).

Dans cet exemple, chaque côté du bloc a une épaisseur, un style et une couleur de bordure différents.

Pensez à la façon dont vous pourriez créer une forme comme celle-ci en utilisant CSS :

Les valeurs de bordure - épaisseur, style et couleur - peuvent être définies séparément à l'aide de propriétés spéciales.

• style de bordure - style de bordure.
• border-width - largeur de la bordure.
• border-color - couleur de la bordure.

Considérons chacune des valeurs séparément.

propriété de style frontière Style de bordure.

La propriété border-style définit le style de la bordure. En CSS, contrairement au HTML, la bordure d'un élément peut être non seulement solide. Les valeurs suivantes sont acceptées pour le style de bordure :

1. none - pas de bordure (par défaut).
2. solide - bordure solide.
3. double - double bordure.
4. pointillé - bordure en pointillés.
5. pointillé - une bordure composée d'une série de points.
6. crête - bordure "crête".
7. rainure - bordure "groove".
8. encart - bordure déprimée.
9. début - bordure extrudée.

Exemples de ce à quoi ils ressemblent.

pas de frontière (aucune)

bordure solide

double bordure

bordure d'une série de points (en pointillés)

bordure pointillée

bordure de rainure

bordure de crête

bordure en retrait (en médaillon)

bordure extrudée (début)

À propos, si vous définissez la couleur de la bordure sur le noir pour le cadre faîtier, vous obtiendrez ce résultat.

Un bloc div avec une bordure noire et un style de crête.

Le cadre semble solide, mais c'est parce que le style de crête est créé en ajoutant un effet d'ombre noire, et l'effet noir n'est pas visible sur un cadre noir.

Grâce à la propriété border-style, le style de bordure peut être défini non seulement pour tous les côtés du bloc. Il est possible de définir plusieurs valeurs pour une propriété de style de bordure ; en fonction du nombre de valeurs, le style de bordure sera attribué à un nombre différent de côtés du bloc. Vous pouvez définir une, deux, trois ou quatre valeurs. Regardons des exemples pour chaque cas.

Une valeur (solide) - le style de bordure est défini pour tous les côtés du bloc.

Deux valeurs (double solide) - la première valeur définit le style des côtés supérieur et inférieur, la seconde - du côté.

Trois valeurs (plein double pointillé) - la première valeur pour le côté supérieur, la seconde pour les côtés, la troisième pour le bas.

Quatre valeurs (pointillés pleins doubles) - chaque valeur pour un côté dans le sens des aiguilles d'une montre en commençant par le haut.

La propriété de largeur de frontière. Épaisseur de la bordure.

Pour définir la largeur de la bordure d'un élément, utilisez la propriété border-width. L'épaisseur de la bordure peut être spécifiée dans n'importe quelle unité de mesure absolue, par exemple en pixels.

Comme la propriété border-style, la propriété peut également être définie sur une à quatre valeurs. Regardons des exemples pour chaque cas.

Exemple de code :

Il existe également des valeurs de mots-clés pour la propriété border-width. Il y en a trois au total :

• mince - bordure fine;
• épaisseur moyenne - moyenne;
• épais - bordure épaisse ;

Épaisseur de la bordure : fine.

Épaisseur de la bordure : moyenne.

Épaisseur de la bordure : épaisse.

La propriété border-color. Couleur de la bordure.

Pour contrôler la couleur de la bordure, utilisez l'outil border-color. Les couleurs de cette propriété peuvent être définies en utilisant n'importe quelle méthode décrite dans l'article « Couleurs en CSS », à savoir :

• Notation hexadécimale (#ff00aa) de la couleur.
• Le format RVB est rgb(255,12,110) . Format RVBA pour CSS3.
• Formats HSL et HSLA pour CSS3.
• Nom de la couleur, par exemple noir. Pour une liste complète des noms de couleurs, consultez le tableau Noms de couleurs CSS.

La propriété border-color peut également avoir une à quatre valeurs et les traite de la même manière que les propriétés précédentes.

Une valeur (rouge).

Deux valeurs (rouge noir).

Trois valeurs (rouge noir jaune).

Quatre valeurs (rouge noir jaune bleu).

Revenons maintenant au problème énoncé ci-dessus et dessinons une figure :

Voici le code qui dessine une telle figure, mais de plus grande taille :

Définition des valeurs pour les côtés séparément

Il a été mentionné ci-dessus que vous pouvez spécifier les valeurs des propriétés de bordure pour un seul côté d'un bloc. Il existe des propriétés à ces fins :

• bordure supérieure
• bordure droite (bordure droite)
• bordure inférieure
• bordure gauche (bordure gauche)

Permettez-moi de vous rappeler que pour toutes les propriétés, trois valeurs​​sont spécifiées (épaisseur, style et couleur) dans n'importe quel ordre. Mais il existe des propriétés qui vous permettent de définir séparément l'épaisseur, la couleur et le style de chaque côté. L'écriture de ces propriétés est dérivée de ce qui précède.

Options de bordure supérieure (border-top).

• border-top-color - définit la couleur de la bordure supérieure de l'élément.
• border-top-width - définit l'épaisseur de la bordure supérieure de l'élément.
• border-top-style - définit le style de la bordure supérieure de l'élément.

Options de bordure droite (bordure droite).

• border-right-color - définit la couleur de la bordure droite de l'élément.
• border-right-width - définit l'épaisseur de la bordure droite de l'élément.
• border-right-style - définit le style de la bordure droite de l'élément.

Options de bordure inférieure (border-bottom).

• border-bottom-color - définit la couleur de la bordure inférieure de l'élément.
• border-bottom-width - définit l'épaisseur de la bordure inférieure de l'élément.
• border-bottom-style - définit le style de la bordure inférieure de l'élément.

Options de bordure gauche (bordure gauche).

• border-left-color - définit la couleur de la bordure gauche de l'élément.
• border-left-width - définit l'épaisseur de la bordure gauche de l'élément.
• border-left-style - définit le style de la bordure gauche de l'élément.

Un exemple d'utilisation de ces propriétés :

La propriété border-radius. Arrondir les coins des bordures.

La propriété border-radius est destinée à arrondir les coins des bordures d'un élément. Cette propriété a été introduite dans CSS3 et fonctionne correctement dans tous les navigateurs modernes à l'exception d'Internet Explorer 8 (et versions antérieures).

Les valeurs peuvent être n'importe quel nombre utilisé en CSS.

Propriété Border-radius : 15px.

Si le cadre du bloc n'est pas spécifié, le congé se produit avec l'arrière-plan. Voici un exemple de bloc arrondi sans bordure, mais avec une couleur de fond :

Propriété Border-radius : 15px.

Il existe des propriétés pour arrondir chaque coin individuel d'un élément. Cet exemple les utilise tous :

Rayon de la bordure supérieure gauche : 15 px ; rayon de bordure en haut à droite : 0 ; bordure en bas à droite : 15 px ; bordure inférieure gauche : 0 ;

Propriété Border-radius : 15px.

Bien que ce code puisse être écrit dans une seule déclaration : border-radius : 15px 0 15px 0 . Le fait est que la propriété border-radius peut être définie entre une et quatre valeurs. Le tableau ci-dessous présente les règles qui régissent ces annonces.

Après avoir soigneusement étudié ce tableau, vous comprendrez que l'entrée la plus courte pour le style souhaité ressemblera à ceci : border-radius : 15px 0 . Il n'y a que deux significations.

Un peu de pratique

Dessiner un citron en utilisant CSS.

Voici le code d'un tel bloc :

Marge : 0 automatique ; /* Centrer le bloc */ width: 200px; hauteur : 200px ; arrière-plan : #F5F240 ; bordure : 1px solide #F0D900 ; rayon de bordure : 10px 150px 30px 150px ;

Nous avons déjà dessiné la figure :

Maintenant, laissons-en un triangle :

Le code triangulaire est :

Marge : 0 automatique ; /* Centrer le bloc */ padding: 0px; largeur : 0px ; hauteur : 0 ; bordure : 30px blanc uni ; couleur de la bordure inférieure : rouge ;

Propriété CSS – « frontière", permet de définir l'épaisseur, la couleur et le type de la ligne périmétrique autour de l'élément. Les paramètres de cette propriété peuvent être écrits sur une seule ligne, séparés par un espace, et dans n'importe quel ordre.

• - épaisseur de ligne d'un pixel
• - ligne continue
• - couleur blanche
• - couleur noire
• - couleur grise

Bordure d'élément solide

Bordure d'élément de tiret

Bordure d'élément en pointillé

Bordure d'élément avec double ligne

Propriété des sections de bordure individuelles

Cadre rainuré embouti en volume

Cadre ondulé convexe en volume

Cadre pressé volumétrique

Cadre convexe volumétrique

Leçons / CSS /

Leçon 7 : Bordure d'élément CSS

Presque tous les sites Web utilisent une propriété qui crée une bordure autour d'un élément. Il est nécessaire soit pour les boutons, soit pour les blocs contenant du texte. Pour créer une bordure, un élément possède deux propriétés en CSS : border et outline. Regardons-les.

frontière

Cette propriété est nécessaire pour définir un cadre autour d'un élément ; elle indique sa bordure dans un document web ; la largeur du cadre est prise en compte lors du positionnement de l'élément. Il a 3 significations : couleur, épaisseur et type de cadre.

La syntaxe de la propriété border est la suivante :

bordure : Largeur Type Couleur ;
Vous pouvez choisir un ordre différent pour spécifier les valeurs des propriétés, mais l'essentiel passe par un espace.

L'épaisseur (largeur) du cadre doit être précisée en pixels (px) ou en pourcentage (%).
La couleur peut être spécifiée soit au format RVB (Rouge Vert Bleu) soit en code HTML HEX.

Ci-dessous sont TYPES DE LIGNES avec leurs noms :

Comment définir les bordures d'un élément ? Nous procédons comme suit :

#bloc (
bordure : 3px solide #0085cc ; /* définit la ligne sur 3 pixels d'épaisseur et bleue */
}

Si vous souhaitez en installer un, deux, trois cadres d'un certain côté, alors on l'indique comme ceci :

bordure supérieure- cadre sur le dessus ;
bordure inférieure— cadre en bas ;
bordure gauche- cadre à gauche ;
bordure droite- cadre à droite ;

Bloc (
bordure droite : 3px solide #0085cc ;
bordure inférieure : 2 px en pointillés #0085cc ;
}

Si tu veux supprimer des cadresélément en CSS, puis écrivez dans la propriété border - aucun

Vide (
bordure : aucune ; /* un élément de classe vide n'aura pas de bordure */
}

contour

Le contour est une propriété nécessaire pour définir la bordure extérieure d'un élément.

Manger deux différences par rapport à la frontière:
Premièrement, la ligne spécifiée dans le contour n'affectera PAS la position du bloc lui-même, sa largeur et sa hauteur.
Deuxièmement, il n'y a aucune possibilité d'installer un cadre d'un certain côté.
La syntaxe est la même que celle de border.

contour : 2px pointillé #0085cc ; /* cadre 2 pixels pointillés bleu */
Pour le contour, ainsi que pour la bordure, vous pouvez supprimer des cadres en écrivant none :

Merci de votre attention !

Article précédent
Leçon 6.

Limites des éléments.

Rembourrage et marges en CSS. Que sont la marge et le remplissage ? Article suivant
Leçon 8. Comment définir la couleur du texte et l'arrière-plan d'un élément en CSS ?

Commentaires sur l'article (vk.com)

frontière

Prise en charge du navigateur

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Description

La propriété CSS vous permet de définir simultanément la largeur, le style et la couleur de la bordure d'un bloc. Une bordure de bloc est une ligne/un cadre régulier qui entoure le bloc de tous les côtés. Il convient de considérer que l’ajout d’un cadre affectera la taille globale du bloc.

Les valeurs sont séparées par un espace et peuvent apparaître dans n'importe quel ordre ; le navigateur déterminera lui-même laquelle correspond au paramètre souhaité. Il n'est pas nécessaire de spécifier les trois valeurs ; la largeur et/ou la couleur peuvent être omises, auquel cas la valeur définie par défaut pour la propriété sera utilisée à la place de la valeur manquante, c'est-à-dire si par exemple la largeur n'est pas précisée, la valeur par défaut de la propriété sera utilisée. Le tableau situé sous la syntaxe indique les valeurs dont les propriétés peuvent être utilisées.

Remarque : Pour définir des bordures uniquement sur certains côtés d'un élément, utilisez les propriétés suivantes : border-top, border-bottom, border-left, border-right.

Astuce : En règle générale, lorsque vous utilisez une bordure, vous devrez ajouter un remplissage.

Propriété CSS : bordure

Ils ajoutent un espace blanc entre le cadre de bloc et son contenu : texte, images ou balises enfants. Habituellement, la bordure est dessinée à proximité du contenu de l'élément, cela n'est utile que si vous devez définir une bordure autour de l'image.

Syntaxe

border: border-width border-style border-color|inherit;

Valeurs des propriétés

Exemple

Il y a du texte ici.

Le résultat de cet exemple dans la fenêtre du navigateur :

Comment définir la couleur, le style et la taille de la bordure des cases.

Dans les langages de balisage, border( frontière), n’ont que des tableaux, des images et des cadres, dans certains cas il est possible de définir la couleur de la bordure et c’est tout.

attribut de bordure

Les feuilles de style en cascade nous offrent plus d’options, mais avant tout.

En CSS, nous pouvons contrôler la largeur de la bordure en utilisant largeur de bordure, ou pour être plus précis, on peut contrôler l'épaisseur de chaque face séparément :
largeur de la bordure supérieure- épaisseur de la bordure supérieure
bordure-largeur-droite— épaisseur de la bordure droite
bordure-bas-largeur- épaisseur de la bordure inférieure
bordure-gauche-largeur— épaisseur de la bordure gauche
Mais il peut aussi exister une forme abrégée :
P (largeur de bordure : haut à droite, bas à gauche ;)(en haut à droite en bas à gauche).
La largeur de la bordure peut être définie :
en chiffres DIV(border-width:5px), de zéro à l'infini, c'est-à-dire positif.
mince— bordure fine, DIV(border-width:thin)
moyen- bordure moyenne, DIV(border-width:medium)
épais- bordure épaisse, DIV(border-width:thick)
Les chiffres sont clairs, mais avec ces valeurs tout dépend du navigateur, mais quand même mince<= medium <= thick .

Nous pouvons également contrôler la couleur de la bordure en utilisant couleur de la bordure ou pour être plus précis, la couleur de chaque face :
couleur de la bordure supérieure couleur de la bordure supérieure ;
couleur de la bordure droite couleur de la bordure droite ;
couleur de la bordure inférieure couleur de la bordure inférieure ;
couleur de la bordure gauche couleur de la bordure sur le côté gauche.
La valeur de couleur est définie comme pour couleur, c'est-à-dire une des 16 couleurs : aqua, noir, bleu, fuchsia, gris, vert, citron vert, marron, marine, olive, violet, rouge, argent, bleu sarcelle, blanc ou jaune, vous pouvez également définir les couleurs : couleur : #000000, couleur:#AF0 , couleur: rvb (255,0,0) ou couleur: rvb (100%, 0%, 0%).
Quelle que soit la palette de couleurs que vous choisissez, les navigateurs la convertiront toujours en couleur: rvb (255,0,0). Par exemple couleur: citron vert = couleur:#00ff00 = couleur:#0F0 = couleur: rvb (0%, 100%, 0%), mais pour le navigateur c'est pareil couleur: rvb (0,255,0), c'est-à-dire il calculera cette valeur.

Si l'épaisseur et la couleur de la bordure peuvent être contrôlées par HTML, alors le style( style bordure) CSS uniquement !!!
Le style peut être contrôlé de chaque côté séparément :
style bordure supérieure style de bordure supérieure ;
style bordure droite style de bordure droite ;
style bordure inférieure style de bordure inférieure ;
style bordure gauche style de bordure du côté gauche.
Examinons maintenant les valeurs de style :
1)style de bordure : aucun- Il s'agit de la valeur par défaut, similaire à border-width:0.
2)style de bordure: masqué- La même chose, sauf pour les tableaux, que nous reviendrons plus tard.
3)style de bordure : pointillé— Une bordure faite de points.
4)style de bordure : pointillé— Bordure constituée d'une ligne pointillée.
5)style de bordure:solide— Une bordure constituée d'un trait plein, c'est-à-dire comme en HTML.
6)style de bordure:double— Une bordure constituée d'une double ligne continue, il vous faut ici une largeur de bordure d'au moins 3 pixels.
7)style de bordure:rainure— La bordure semble avoir été découpée dans de la toile.
8)style de bordure:crête— La bordure semble dépasser de la toile.
9)style de bordure:encart— La boîte entière semble enfoncée dans la toile.
10)style de bordure: début- Le contraire du précédent.
Certains navigateurs peuvent ignorer les valeurs : pointillé, pointillé, double, rainure, crête, incrustation et retrait et les afficher sous forme solide, c'est-à-dire une frontière ordinaire.

Tout cela est vrai, bien sûr, mais tous les exemples ci-dessus ne représentent que le principe de fonctionnement, pas le mécanisme.
Propriété de règle frontière implique (border: size style color;), cette règle est satisfaite si les trois valeurs sont présentes et uniquement dans cette séquence, par exemple H1( bordure : 5px double rouge ;), mais il peut y avoir des exceptions si ces valeurs sont fournies par des langages de balisage, par exemple pour un tableau TABLE(bordure : 2px), c'est-à-dire Une seule valeur est spécifiée.

Afin de gérer non pas la totalité de la frontière, mais chaque partie séparément, il existe des règles :
(bordure en haut : couleur du style de taille ;) Contrôle du trottoir supérieur ;
(bordure droite : couleur du style de taille ;) Contrôle des trottoirs à droite ;
(bordure en bas : couleur du style de taille ;) Contrôle du trottoir inférieur ;
(bordure gauche : couleur du style de taille ;) Contrôle du trottoir à gauche.
Ces règles peuvent être utilisées individuellement ou toutes ensemble.

L'exception est cette règle :
H1(
bordure : 4 px, vert uni ;
}
Le fait est qu'en CSS la dernière règle a la priorité la plus élevée, dans ce cas la propriété border contient border-left et donc la règle border-left sera ignorée, correctement comme ceci :
H1(
bordure : 4 px, vert uni ;
bordure gauche : 2 px double rouge ;
}
Tout d’abord, nous fixons des règles pour l’ensemble de la frontière, puis pour des sections individuelles.

J'ai tout pour les bordures des éléments, sauf que nous examinerons certaines propriétés lorsque nous arriverons aux tables et autres exceptions.

CSS : bordure. Limites des éléments.

Bordures CSS3

Bordures CSS3

Avec CSS3, vous pouvez créer des bordures arrondies, ajouter des ombres aux conteneurs et utiliser une image comme bordure, sans utiliser de programme de conception comme Photoshop.

Dans cette leçon, vous découvrirez les propriétés suivantes d’une bordure :

• rayon de frontière
• boîte-ombre
• image-bordure

Prise en charge du navigateur

Propriété	Prise en charge du navigateur
rayon de frontière
boîte-ombre
image-bordure

Internet Explorer 9 prend en charge certaines des nouvelles propriétés de bordure.

Firefox nécessite le préfixe -moz- pour border-image.

Chrome et Safari nécessitent le préfixe -webkit- pour border-image.

Opera nécessite le préfixe -o- pour border-image.

Safari nécessite également le préfixe -webkit- pour box-shadow.

Opera prend en charge de nouvelles propriétés de bordure.

Coins arrondis CSS3

L'ajout de coins arrondis dans CSS2 était délicat. Nous avons dû utiliser une image différente pour chaque angle.

En CSS3, créer des coins arrondis est simple.

En CSS3, la propriété border-radius est utilisée pour créer des coins arrondis :

Ce bloc a des coins arrondis !

Ombre du conteneur CSS3

En CSS3, la propriété box-shadow est utilisée pour ajouter une ombre aux conteneurs :

Image de bordure CSS3

Grâce à la propriété CSS3 border-image, vous pouvez utiliser une image pour créer une bordure :

La propriété border-image vous permet de spécifier une bordure d'image !

L'image originale utilisée pour créer la bordure est la vôtre :

Nouvelles propriétés de bordure

attribut de bordure

attribut de bordure, étiqueter

, utilisé pour spécifier l'épaisseur de la bordure autour du tableau.

Bordures HTML

Il est acceptable d'utiliser une bordure sans valeurs, l'épaisseur de la bordure sera alors égale à un pixel. Par défaut, le cadre est affiché avec des effets 3D, mais si vous appliquez en plus l'attribut background, le cadre deviendra « plat ».

De plus, si l'attribut border a une valeur non nulle, les navigateurs affichent également de fines bordures autour des cellules elles-mêmes. L'affichage de ces limites peut être contrôlé à l'aide de l'attribut Rules.

Valeurs

La valeur de l'attribut peut être n'importe quel nombre non négatif spécifiant la taille en pixels.

Valeur par défaut : 0.

Syntaxe

Attribut obligatoire : aucun.

Exemple HTML : Utilisation de l'attribut border

Exemple de résultat

Résultat. Application de l'attribut border.

Border-image est une propriété qui vous permet de définir une image d'arrière-plan pour la bordure de l'élément. La propriété remplit un cadre avec une image donnée, en répartissant les parties de l'image de manière à ce que les parties de coin se trouvent dans les coins du cadre et que les espaces entre elles soient remplis avec le reste de l'image.

Cette propriété permet de réaliser facilement des choses incroyables qui nécessitaient auparavant 3 à 8 images et une manipulation du balisage.

Mise à jour : Firefox fonctionne à partir de la version 29.

La taille de l'image est égale à l'épaisseur du cadre. La couleur et le style du cadre sont ignorés.

Si vous définissez uniquement border-image-source , l'image remplira les coins, sans savoir quoi faire ensuite :

Bordure : 80 px, solide et transparente ; image de bordure : url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Bordure-image-tranche

Propriété importante qui détermine la taille du morceau d’image qui remplira les coins du cadre. Les parties restantes seront utilisées pour remplir l'espace entre les coins selon l'algorithme spécifié dans border-image-repeat .

Valeurs possibles :

<проценты>- calculé par rapport à la taille de l'image. Horizontal par rapport à la largeur, vertical - par rapport à la hauteur.<числа>- des pixels (pour une image raster) ou des coordonnées (pour une image vectorielle). Les unités de mesure ne sont pas indiquées.

Pour définir des valeurs pour chaque côté, plusieurs valeurs peuvent être spécifiées séparées par un espace.

La somme des valeurs des côtés opposés doit être inférieure à la taille de l'image, sinon il n'y aura rien pour remplir l'espace entre les coins.

Bordure : 80 px, solide et transparente ; image de bordure : url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); bordure-image-tranche : 100 ;

Répétition de l'image de bordure

La propriété détermine la manière dont les espaces entre les coins seront comblés.

Valeurs possibles : stretch - étire la zone de remplissage de l'image. Valeur par défaut ;

répéter - répète la section de remplissage, tandis que les joints avec l'image du coin sont visibles ;

rond - comble l'espace entre les coins. Une couture peut être visible au milieu du côté. L'action la plus prudente.

espace - agit de la même manière que répéter . Je n'ai trouvé aucune différence.

Vous pouvez définir deux valeurs à la fois, la première sera responsable du comportement de l'image dans les cadres supérieur et inférieur, la seconde - pour la gauche et la droite.

Image de bordure : url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); bordure-image-tranche : 100 ; border-image-repeat : répéter ;

A gauche c'est la répétition, à droite c'est rond.

Si le cadre est complexe et que les côtés ne s'emboîtent pas bien, l'étirement fonctionnera plus correctement, voici un exemple.

Largeur de l'image de la bordure<длина>bordure-image-largeur<%>La propriété contrôle la largeur de la partie visible du cadre et la met à l'échelle. Si cette valeur est supérieure à border-width , l'image de bordure sera glissée sous le contenu, même si la propriété fill n'est pas définie.<числа>Valeurs possibles :

- les valeurs en px ou em ;

- des valeurs en pourcentage par rapport à la taille de l'image ;

- valeur numérique par laquelle la largeur de bordure automatique est multipliée - mot-clé. Si elle est donnée, la valeur est égale à la border-image-slice correspondante. S'il n'y a pas de taille appropriée, la valeur de largeur de bordure est utilisée et l'image remplit tout le coin du cadre, rampant sous le contenu. Cela fonctionne un peu bizarrement.

Bordure : 60 px, solide et transparente ; image de bordure : url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); bordure-image-tranche : 80 ; border-image-repeat : rond ; largeur de l'image de bordure : 160 px ;

Largeur de l'image de la bordure<длина>bordure-image-largeur<числа>Sur la droite se trouve un cadre avec border-image-width . L'exemple de gauche montre comment l'image a été recadrée par les bords intérieurs du cadre. En raison de l'augmentation de la largeur, le cadre droit s'est glissé sous le contenu.

Bordure : 60 px, solide et transparente ; image de bordure : url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); bordure-image-tranche : 120 ; border-image-repeat : rond ; bordure-image-outset : 60px 10px 50px 120px ;

À droite, un exemple avec border-image-outset . Cette propriété n'affecte pas la taille de l'élément et le cadre peut chevaucher des éléments adjacents.

Les cadres ont de nombreuses utilisations, par exemple comme élément décoratif ou pour séparer deux objets. CSS offre d'innombrables options pour utiliser les bordures.

Épaisseur du cadre

L'épaisseur de la bordure est déterminée par la propriété border-width, qui peut avoir les valeurs fine, moyenne et épaisse, ou une valeur numérique en pixels. La figure montre ce système :

Couleur du cadre

La propriété border-color spécifie la couleur de la bordure. Les valeurs sont des valeurs de couleur normales, par exemple : "#123456", "rgb(123,123,123)" ou "jaune" .

Types de cadres

Il existe différents types de cadres. Les huit types de trames et leur interprétation dans Internet Explorer 5.5 sont présentés ci-dessous. Tous les exemples sont présentés en couleur « or » et en épaisseur « épaisse », mais peuvent bien entendu être affichés dans d’autres couleurs et épaisseurs.

Les valeurs none ou masqué peuvent être utilisées si vous ne souhaitez pas afficher la bordure.

Exemples de définition de cadres

Les trois propriétés décrites ci-dessus peuvent être combinées dans chaque élément et, par conséquent, différents cadres peuvent être définis. Pour illustrer, jetons un coup d'œil au document, qui définit différents cadres pour

,

,

Et

Le résultat n’est peut-être pas si impressionnant, mais il montre quelques possibilités :

H1 ( largeur de bordure : épaisse ; style de bordure : pointillé ; couleur de bordure : or ; ) h2 ( largeur de bordure : 20 px ; style de bordure : début ; couleur de bordure : rouge ; ) p ( largeur de bordure : 1 px ; style de bordure : pointillé ; couleur de bordure : bleu ; ) ul ( largeur de bordure : fine ; style de bordure : solide ; couleur de bordure : orange ; )

Vous pouvez également définir des propriétés spéciales pour les bords supérieur, inférieur, droit et gauche du cadre. Voici comment procéder :

H1 ( largeur de la bordure supérieure : épaisse ; style de la bordure supérieure : solide ; couleur de la bordure supérieure : rouge ; largeur de la bordure inférieure : épaisse ; style de la bordure inférieure : unie ; couleur de la bordure inférieure : bleue ; border-right-width : épais ; border-right-color : vert ; border-left-style : solide ;

Notation courte

Comme pour de nombreuses autres propriétés, vous pouvez combiner plusieurs propriétés en une seule en utilisant le mot bordure. Exemple:

P ( largeur de bordure : 1 px ; style de bordure : solide ; couleur de bordure : bleu ; )

peut être combiné en :

P ( bordure : 1px bleu uni ; )

CV

Dans ce didacticiel, vous avez découvert les possibilités illimitées du CSS lors de l'utilisation des bordures.

Dans la leçon suivante, nous verrons comment définir les dimensions d'un modèle de boîte : hauteur et largeur.




Des questions ?
Nom
E-mail *
Message *
Envoyer
Signaler une faute de frappe
Texte qui sera envoyé à nos rédacteurs :
Votre commentaire (facultatif) :
Envoyer Annuler