EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial CSS Inner Border

CSS Inner Border

By Priya PedamkarPriya Pedamkar

CSS Inner Border

Introduction to CSS Inner Border

Inner Border is nothing, but space created between border and outline property or element. We can apply the inner border to the text of paragraphs and headers, table content and images. There is no restriction that the inner border always is in rectangular or square shape only, it can be any shape.

Rectangular border shape of the inner border:

CSS Inner Border 1

Rectangular border-radius shape of the inner border:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

CSS Inner Border 2

The above two images conclude that the inner border can be of any shape.

Working Principle of Inner Border

The inner border is working on properties called outline and outline-offset. Outline property describes element border size, border type and color of the border respectively.

Syntax:

div{
outline: 10px solid green;
}

Outline-offset describes distance or space between the border and outline element.

Syntax:

div{
outline-offset: 10px;
}

Examples with Syntax of CSS Inner Border

Given below are the examples of CSS Inner Border:

Outline Border have Multiple Types

  • Solid: It gives border as solid, just like bold text.
  • Dotted: It gives border as dotted lines.
  • Dashed: It gives border as dashed lines.
  • Double: It gives border as double solid.
  • Groove: It gives outside curved edges as a border.
  • Ridge: It gives inside curved edges as a border (opposite functionality of groove).

Example #1 – Outline and offset with Solid Border.

Syntax:

div{
outline: 10px solid green;
outline-offset: 10px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<title>SolidOutline</title>
</head>
<style>
.solid {
width:400px;
length:100px;
margin: 40px 40px 40px 180px;
font-size:20px;
font-family:sans-serif;
border: 6px solid blue;
background-color: orange;
outline: 10px solid green;
outline-offset: 5px ;
}
</style>
<body>
<div class="solid">
Hi, I am dashed outline offset model. CSS Make me look like this.
</div>
</body>
</html>

Output:

css inner border op 1

Example #2 – Outline and offset Dotted Border

Syntax:

div{
outline: 10px dotted blue;
outline-offset: 15px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<title>DottedOutline</title>
</head>
<style>
.dotted {
width:400px;
length:100px;
margin: 40px 40px 40px 180px;
font-size:20px;
font-family:sans-serif;
border: 6px solid yellow;
background-color: brown;
outline: 10px dotted purple ;
outline-offset: 15px ;
}
</style>
<body>
<div class="dotted">
Hi, I am dotted outline offset model. CSS Make me look like this.
</div>
</body>
</html>

Output:

outline and offset

Example #3 – Outline and offset with Dashed Border

Syntax:

div{
outline: 10px dashed blue;
outline-offset: 12px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<title>DashedOutline</title>
</head>
<style>
.dashed {
width:400px;
length:100px;
margin: 40px 40px 40px 180px;
font-size:20px;
font-family:sans-serif;
border: 6px solid brown;
background-color: silver;
outline: 10px dashed red ;
outline-offset: 15px ;
}
</style>
<body>
<div class="dashed">Hi, I am dashed outline offset model. CSS Make me look like this. </div>
</body>
</html>

Output:

outline and offset with dashed border

Example #4 – Outline and offset with Double Border

Syntax:

div{
outline: 10px double brown;
outline-offset: 13px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<title>DoubleOutline</title>
</head>
<style>
.double {
width:400px;
length:100px;
margin: 40px 40px 40px 180px;
font-size:20px;
font-family:sans-serif;
border: 6px solid orange;
background-color: yellow;
outline: 10px double maroon ;
outline-offset: 15px ;
}
</style>
<body>
<div class="double">Hi, I am double outline offset model. CSS Make me look like this. </div>
</body>
</html>

Output:

css inner border op 4JPG

Example #5 – Outline and offset with Groove Border

Syntax:

div{
outline: 10px groove yellow;
outline-offset: 14px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<title>GrooveOutline</title>
</head>
<style>
.groove {
width:400px;
length:100px;
margin: 40px 40px 40px 180px;
font-size:20px;
font-family:sans-serif;
border: 6px solid black;
background-color: gray;
outline: 20px groove teal ;
outline-offset: 17px ;
}
</style>
<body>
<div class="groove">Hi, I am Groove outline offset model. CSS Make me look like this. </div>
</body>
</html>

Output:

groove

Example #6 – Outline and offset with Ridge Border

Syntax:

div{
outline: 10px ridge silver;
outline-offset: 10px;
}

Code:

<!DOCTYPE html>
<html>
<head>
<title>RidgeOutline</title>
</head>
<style>
.ridge {
width:400px;
length:100px;
margin: 40px 40px 40px 180px;
font-size:20px;
font-family:sans-serif;
border: 6px solid navy;
background-color: orange;
outline: 20px ridge teal ;
outline-offset: 17px ;
}
</style>
<body>
<div class="ridge">Hi, I am Ridge outline offset model. CSS Make me look like this.       </div>
</body>
</html>

Output:

ridge

Conclusion

Inner Border always creates space between the border and outer element, border created space from text to top whereas the outline border creates space between borders to outer element.

Conclusion Analogy:

css inner border op 7PG

The black color is border-created between top and text, and the inner border is green color created between border outline.

Recommended Articles

This is a guide to the CSS Inner Border. Here we discuss the introduction, working principle, and different examples of Inner Border. You may also have a look at the following articles to learn more –

  1. Types of CSS Selectors
  2. Menu Icon CSS
  3. CSS Border Padding
  4. CSS Blinking Text
0 Shares
Share
Tweet
Share
quiz