Home > Article > Web Front-end > Learn the difference between CSS borders and outlines

Learn the difference between CSS borders and outlines

WBOYforward: 2023-09-15 08:25:01667browse

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-

Learn the difference between CSS borders and outlines

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-

Learn the difference between CSS borders and outlines

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!

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to make a Google search bar (like an input box) highlight on hover using CSS?Next article：How to make a Google search bar (like an input box) highlight on hover using CSS?

See more

Learn the difference between CSS borders and outlines

Syntax

Example

Output

Example

Output

Related articles