Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Outlines vs Borders in CSS
Outline doesn't take up space and is displayed around the border if set. It is used for highlighting elements and we can't specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with a thin outline.
Borders can be customized to a greater extent. We style individual sides of a border and round their edges. Borders take up space and affect the box-sizing.
Outlines
The outline is drawn outside the borders. It is a line drawn around elements. The following are the properties. We can set all these with a single shorthand property −
outline-style: outline-color: outline-width: outline-offset:
Syntax
The syntax of CSS outlines property is as follows −
Selector {
outline: /*value*/
}
Example
Let us see an example. You can clearly see the outline are even outside the borders −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: yellow solid 5px;
}
p {
outline: blue dashed 10px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text</p>
</body>
</html>
Borders
The borders are set using the border properties. The following are the properties. We can set all these with a single shorthand property −
border-style
border-width
border-color
Note − The border-style is a must, else the border won't be visible.
Syntax
The syntax of CSS border property is as follows −
Selector {
border: /*value*/
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 2px dashed yellow;
}
p {
border: 3px dotted orange;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text</p>
</body>
</html>
Example
The following example illustrate CSS outline and border property −
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: flex;
float: left;
margin: 20px;
padding: 12px;
width: 30%;
outline: thin dotted;
background-color: lavender;
}
p + p {
width: 250px;
outline: none;
border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>
Example
Let us see another example −
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: auto;
width: 70%;
outline: thick double;
background-color: lightgoldenrodyellow;
}
h3 {
border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html>
730 Views
