• Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Essentials

CSS3 tutorial: Multiple border using box-shadow

December 30, 2019
in Essentials

This tutorial will explain how to bring the Multiple boder in html element using CSS3 Box shadow.

You might also like

15 Free CSS Floating action buttons

13 Free CSS Ripple Effect Buttons

15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience

Custom radio button using CSS only

T-shirt cannon playful animated button concept

Chat bubble smoothly morphs into a “close” X

CSS3 code for Box shadow Multi border

 div { 	width: 300px; 	height: 300px; 	margin: 35px; 	background: #fff; 	box-shadow: 0 0 0 10px #b2d00e, 0 0 0 25px #3539bf, 0 0 0 35px #6bc7ea, 0 5px 20px 30px #000; }

Demo try it yourself

Box Shadow property structure

 box-shadow: Horizontal-Length Vertical-Length Blur-Radius Spread-Radius Color

Below you will find the tutorial for the above example

I’ll show the tricks to achieve the multi borders effect using CSS3 box-shadow style. From the below steps you can find how to form multi borders using CSS box-shadow. In box shadow property we can use more than one set of property with comma separated. Each property has 5 metrics which is mentioned in above code. Find the syntax of box-shadow multiple properties.

Box-Shadow code structure

 div { 	box-shadow: property4, property3, property2, property1 }

So now, you will be got know which one will be the parent and which one is the child. Here it will work from end to top. In the above example property1 is at end and property4 is at top. So here property1 is the parent for all other properties. Below you can see that in step by step demo

Step 1: Add glow effect for the box

In the below code I’m just add the property for glow. So I’m using Blur-Radius as 20px and the Spread-Radius as 30px. If you use the below code that the output will be like below image

CSS box shadow with single property

 div { 	box-shadow: 0 5px 20px 30px #000; }

Step1 output

CSS3 tutorial: Multiple border using box-shadow 1

Step2: Add property2 which is child to property1

CSS box shadow with Second property

 div { 	box-shadow: 0 0 0 35px #6bc7ea, 0 5px 20px 30px #000; }

Step2 output

CSS3 tutorial: Multiple border using box-shadow 2

Step3: Add property 3 which is child to property2

CSS box shadow with 3rd property

 div { 	box-shadow: 0 0 0 25px #3539bf, 0 0 0 35px #6bc7ea, 0 5px 20px 30px #000; }

Step3 output

CSS3 tutorial: Multiple border using box-shadow 3

Step 4: Add property4 which is child to property3

After adding all the properties the code will be look like the below code. Don’t add any value to the metrics expect Spread-Radius and Color metrics.

CSS box shadow with 4th property

 div { 	box-shadow: 0 0 0 10px #b2d00e, 0 0 0 25px #3539bf, 0 0 0 35px #6bc7ea, 0 5px 20px 30px #000; }

Step4 output

CSS3 tutorial: Multiple border using box-shadow 4

Demo

Tags: border examplesbordersCSScss borderscss3css3 borderdemodoublelinemultipleshadowtutorial
Previous Post

Tryit Editor for HTML CSS JavaScript using CodeMirror

Next Post

Chapter 1. Introduction to HTML

Related Stories

CSS Floating action buttons
Essentials

15 Free CSS Floating action buttons

March 20, 2023
Free CSS Ripple Effect Button
Essentials

13 Free CSS Ripple Effect Buttons

March 6, 2023
15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience
Essentials

15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience

February 24, 2023
Pill Styled Radio ButtonsPill Styled Radio Buttons
Essentials

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept
Essentials

T-shirt cannon playful animated button concept

October 13, 2020
chat bubble smoothly morphs into a "close" X
Essentials

Chat bubble smoothly morphs into a “close” X

October 13, 2020
Next Post

Chapter 1. Introduction to HTML

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
x
x