CSS : Propriété border

Publié le 30 mai 2014

border-style

La propriété border-style est utilisé pour détérminer le type des bordures elle est doté des propriétés suivantes :

Propriété	Effet
none	aucune bordure
dotted	bordure en pointillé (sauf internet explorer)
dashed	bordure en tirets (sauf internet explorer)
solid	bordure continue
double	bordure en double trait
groove	bordure en creux
ridge	bordure en saillie
inset	bordure en 3d lumière basse
outset	bordure en 3d lumière haute

Exemple 1 :

p { border-style:solid;
border-width: 5px;
border-color: red ; }

Il s’agit d’un type de bordure continue en rouge :

css propriété border-style

Exemple 2 :

p { 
border-style: dashed;
border-width: 2px;
border-color: blue ; }

css propriété border-style : dashed

Exemple 3 :

p { 
border-style: inset;
border-width: 5px;
border-color: black ; }

css propriété border-style : inset

Remarque

On peut aussi spécifier les bordures à droite différemment de celle à gauche, top et bottom, on utilise dans ce cas la commande border-left-width, border-right-width, border-top-width, border-bottom-width, et de même pour les autres propriétés border-left-style, border-left-color…

Exemple :

<html>
<head>
<title> Background CSS </title>
<style>
p { 
border-left-style: inset;
border-left-color: red ;
border-top-style: solid;
border-top-color: blue ;
border-bottom-style: dashed;
border-bottom-color: black ;
border-width: 5px;
 }
</style>
</head>
<body>

Voici un exemple simple
 de bordures css
</body>
</html>

Ce qui va afficher à l’exécution :

des-exemples-de-bordures-css

Post Views: 277

Publié dans CSS ( cascading style sheets)

Très Facile

Tutoriels adaptés aux débutants

Copyright

Rechercher

Utilisateurs en ligne

Feuilles de Style CSS

Annonces Google

Tutoriels Informatiques

TICE & Multimédias

Math-pour-Informatiques

Anglais pour débutants

Nous somme sur Facebook