Home >Web Front-end >CSS Tutorial >Learn the difference between CSS borders and outlines
Learn the difference between CSS borders and outlines
- WBOYforward
- 2023-09-15 08:25:01701browse
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.
Syntax
The syntax for CSS border and outline properties is as follows-
Selector {
border: /*value*/
outline: /*value*/
}Example
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>Output
This gives the following output-
Example
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>Output
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!