Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Understanding the difference between CSS Border and Outline
The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Borders for individual sides can be styled and a border-radius can also be specified.
On the other hand, the CSS outline doesn’t take up space and is displayed around the border if set. It supports offset. Further, we can’t specify if individual sides should have an outline or not.
By default, both borders and outlines are not displayed.
Syntax
The syntax for CSS border and outline property is as follows −
Selector {
border: /*value*/
outline: /*value*/
}
The border property
The border property is used to define the border properties for an element. It is a shorthand for the following properties −
border-width− medium, thin, thick or a specific length
border-style− solid, dashed, dotted, double
border-color− Set the color
The syntax of the CSS border property is as follows −
Selector {
border: /*value*/
}
The value is the border style, width, and color.
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin-top: 14px;
margin-left: 30px;
border: 3px solid yellow;
box-shadow: 0 0 12px 1px black;
}
#demo {
border: 3px dotted blue;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg">
<img id="demo" src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
The outline property
The outline shorthand property can be defined to draw a line of specific style (required), thickness, and color around the borders of the element, but the outline is not a part of element’s dimensions unlike border property.
The syntax of CSS outline Shorthand property is as follows −
Selector {
outline: /*value*/
}
The value above can be −
outline-width
outline-style
outline-color
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: thin dashed green;
}
h2 {
outline: thick dashed green;
}
</style>
</head>
<body>
<h1>Demo Heading1</h1>
<h2>Demo Heading2</h2>
<p>Demo Text</p>
</body>
</html>
Set borders and outline for a container
The following example illustrate the CSS border and outline property. For a div container, we have set both the outline and border −
Example
<!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>
Set borders and outline for a paragraph
In this example, we have set the outline and borders for a <p> −
Example
<!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>
749 Views
