Menu
In my current work I'm required to produce a double border on a container. The border-style: double; achieve this, however my client want the outer border to be thicker & the inner border to be of the normal thickness.
Other than creating 2 divs, 1 nested inside another with the outer div having a larger thickness, or through the use of border images is there any way I can do it with CSS with just 1 div? specifying border-style: double; and still be able to make the outer border thicker.
397
The border-width shorthand CSS property sets the width of an element's border.
Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.
Select one or more cells that have a border that you want to change. Right-click over the cells you've chosen and select Format Cells and, in the popup window, click the Border tab. For a continuous line, choose one of the thicker styles from the Line box. In the Presets section, click your existing border type.
Add a border-left and border-top to the parent. Add border-right and border-bottom to each of the children.
Outlines are included in the CSS3 specification and allow both a border and an outline to be applied to a single element.
The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.
I used outlines to give borders 2 different colors, change the code to give your borders 2 different sizes.
#box { border: 1px double #000; outline: 2px solid #699; outline-offset: -9px; }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
