La propriété de bordure CSS est utilisée pour définir les propriétés de bordure des éléments. C'est un raccourci pour la largeur, le style et la couleur de la bordure. Vous pouvez styliser les bordures de chaque côté et spécifier le rayon de la bordure.
Les contours CSS, en revanche, ne prennent pas de place et, s'ils sont définis, apparaissent autour d'une bordure. Il prend en charge le décalage. De plus, nous ne pouvons pas spécifier si les arêtes individuelles doivent avoir des contours.
Par défaut, les bordures et les contours ne sont pas affichés.
La syntaxe des propriétés de bordure et de contour CSS est la suivante -
Selector {
border: /*value*/
outline: /*value*/
}L'exemple suivant illustre les propriétés de bordure et de contour CSS -
Démo en direct
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>Cela donne le résultat suivant -
Démonstration en direct
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>Cela donne la sortie suivante-
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Barre oblique du tableau Excel divisée en deux
Solution à une signature invalide
La différence entre python et pycharm
Quelles sont les applications de l'Internet des objets ?
que signifie l'élan
La différence entre a++ et ++a
Le rôle du Serverlet en Java
Qu'est-ce qui est mis en évidence dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
