H I O X INDIA
FREE CSS Tutorial
 ACCUEIL  ||  Scripts  ||  Tutoriels  ||  Images  english Español 中文 Deutsch

CSS Sujets
Introduction
Types
Background Propriétés
Propriétés du Texte
Propriétés de Police
Boîte Propriétés
Propriétés de la Frontière
Marge Propriétés
Rembourrages Propriétés
Special Topics
Demandez à vos Doutes
Feedback



Bordure de Côté CSS


Sujet

Comment faire une bordure sur la côté gauche ou droite de mon texte uniquement?
Pour faire des bordures sur des côtés spécifiés par l’utilisateur.
Comment faire différent type de bordure sur différents côtés?



Explication

Propriété: Bordure de Côtés

Chaque côté de la bordure peut être traité séparément avec ces marqueurs.
Usage:
border-top: <border-top-width> || <border-style> || <border-color> ;
border-left: <border-left-width> || <border-style> || <border-color> ;
border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;
border-right: <border-right-width> || <border-style> || <border-color> ;

Définition:
Chaque côté de la bordure peut être traité séparément avec ses marqueurs. Les côtés de bordure se présentent avec les valeurs suivantes.
a)border-top : 5px dotted red - La configuration de la bordure supérieure se fait avec le marqueur bordure-supérieure.Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
b)border-left : 5pt dashed green - La configuration de bordure gauche se fait avec le marqueur bordure-gauche. Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
c)border-bottom : 2% groove grey - La configuration de la bordure inférieure se fait avec le marqueur bordure-inférieure. Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.
d)border-right: 5px solid blue - La configuration de la bordure droite se fait avec l’onglet bordure-droite. Les valeurs prennent la forme largeur, style et couleur de bordure supérieure.

Exemple 1:
<div style=" border-top : 2px dotted red ;"> vérification de la propriété des bordures </div>

Résultat:
vérification de la propriété des bordures



Exemple 2:
<div style=" border-left : 2pt dashed green; "> vérification de la propriété des bordures </div>

Résultat:
vérification de la propriété des bordures




Exemple 3:
<div style=" border-bottom: 5px ridge brown;"> vérification de la propriété des bordures </div>

Résultat:
vérification de la propriété des bordures



Exemple 4:
<div style=" border-right: 5px groove #733366;"> vérification de la propriété des bordures </div>

Résultat:
vérification de la propriété des bordures




En les combinant:
Exemple 5:
<div style="
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
">
vérification de la propriété des bordures </div>

Résultat:
vérification de la propriété des bordures




REMARQUE: Dans cet exemple, on a utilisé le marqueur div. Mais vous pouvez utiliser n’importe quel marqueur html standard pour configurer le style.






A Note
CSS - Feuilles de style en cascade peut être utilisé avec les balises HTML, comme expliqué dans ce site. Cette simple CSS vous permettra de créer beaucoup plus élégant et soigné html des pages web. Cela ne nécessite pas de logiciels ou d'autres codages. Tous les navigateurs web sont capables de transmettre des codes CSS.

Note 2: Si nécessaire, vous pouvez à l'aide de <span> au lieu de <div> marques. div balise de début et de fin sur les nouvelles lignes. span ne dépassera pas la balise domaine.


privacy policy     license
© 2004-2009 HIOX INDIA - hioxindia.com