CSS border property is used to define the border properties of elements. It's shorthand for border width, border style, and border color. You can style the borders on each side and specify the border radius.
CSS outlines, on the other hand, take up no space and, if set, appear around a border. It supports offset. Furthermore, we cannot specify whether individual edges should have outlines.
By default, borders and outlines are not displayed.
The syntax for CSS border and outline properties is as follows-
Selector {
border: /*value*/
outline: /*value*/
}The following example illustrates the CSS border and outline properties-
Live Demonstration
<!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>This gives the following output-
Live Demonstration
<!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>This gives the following output-
The above is the detailed content of Learn the difference between CSS borders and outlines. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
