Menu
How to give border to any element using css without adding border-width to the whole width of element?
Like in Photoshop we can give stroke- Inside , center and outside
I think default css border properties is center like center in photoshop, am i right?
I want to give border inside the box not outside. and don't want to include border width in box width.
494
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
To avoid the width or height getting increased or decreased when using CSS properties like margin , padding , etc, we can use the CSS property called box-sizing and set its value to border-box on the element in CSS.
Using Inline Style attribute Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the inline property for adding the border. Step 2: Now, place the cursor inside the opening tag of that text around which we want to add the border.
Answer: Use the CSS box-shadow property If you want to place or draw the borders inside of a rectangular box there is a very simple solution — just use the CSS outline property instead of border and move it inside of the element's box using the CSS3 outline-offset property with a negative value.
outline:1px solid white; This won't add the extra width and height.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
