Back ArrowExplore all kits

Adding border spacing around div's border using HTML/CSS

share link

by vsasikalabe dot icon Updated: Mar 14, 2023

technology logo
technology logo

Guide Kit Guide Kit  

We can add spacing around the div's border using specific properties. Here, we use the display property to display the text in bold and block. The width and height of the circle are 100px. The background color and border colors are the same. The text is aligned to the center. 


We can Specify a single box shadow using the following notes: 

Two, three, or four values. 

  • If only two values are given, they are set to offset-x and offset-y values. 
  • If a third value is given, it is declared as a blur radius. 
  • If a fourth value is given, it is used for a spread radius. 
  • Optionally, the inset keyword and a color value are also added. 

The shadow is assumed to be a drop shadow if the inset is not specified (default). But if the inset keyword is present, it changes the shadow to one inside the frame. When the mouse enters the circle, the border-spacing will occur. When changing CSS properties, CSS transitions provide a way to control the animation speed. You can also change a property to control the animation speed over some time. 


Here is an example of how to add border spacing around the div's border using HTML with CSS: 

Preview of the output that you will get on running this code from your IDE.

Code

adding border spacing around div's border

CSSdotLines of Code : 17dotLicense : Strong Copyleft (CC BY-SA 4.0)

#example{
  display: block;
  width: 100px;
  height: 100px;
  color: #FFF;
  text-align: center;
  line-height: 100px;
  background-color: #f6653c;
  border: 2px solid #f6653c;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
  transition: box-shadow 0.2s linear;
}
#example:hover{
  box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}
<div id="example">Hover me</div>

Instructions

Follow the steps carefully to get the output easily.

  1. Download and Install VS Code on your Desktop.
  2. Open the VS Code and install Live Server from Extensions.
  3. Open the new file and save as filename.html.
  4. Copy the code using the "Copy" button above, and paste it into your html file (paste css style code) within the style tag.
  5. Click Go live button in the bottom right corner to get the output.


I hope you found this useful. I have added version information in the following sections.


I found this code snippet by searching for ' Adding border spacing around div's border using HTML/CSS ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. Live Server v5.7.9


Using this solution, we are able to add border spacing around div's border using HTML/CSS with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to add borders.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.