Document

How to make double borders with CSS

I wrote this post a while back. The content can still be relevant but the information I’ve linked to may not be available.

When you have a website deadline, it’s quite easy to fall into the ‘trap’ of sticking with tried and tested cascading style sheet (CSS) methods that you know and love. However, it can also be useful to try out CSS properties that you are not so familiar with. For me, this used to be the case with the border property. I used solid borders almost exclusively until I discovered that there were other possibilities including double borders [Ed: you need to get out more].

In fact, it’s quite easy to create double borders with CSS because you can use the border property and assign a style of ‘double’. Choose a border width of 3px or more and a color and there you have it!

For example, this style rule gives a double border:

This is a paragraph with a 3px double border and border color #999

Choose your width carefully because this will affect the width of each inner/outer ‘border’ and spacing. In the above example, each ‘border’ is 1px with a gap of 1px between them. However, the following style rule will widen the inner and outer widths without changing the spacing

This is a paragraph with a double border width of 5px

If you increase the width in your style rule, in IE7 the outer border is increased first, followed by the inner border, then the spacing between the borders. This means that double borders of unequal widths are possible. For example, in IE7 a width of 4px will give an outer border of 2px, spacing of 1px and inner border of 1px. In this case, Firefox 2 seems to do things differently and appears to increase the spacing to 2px. Testing in different browsers is probably a good idea.

This is a paragraph with 4px top double border. In this case, the outer border, inner border and spacing can vary between browsers.

If you stay with widths that are divisible by three in your style rule, the inner and outer borders and spacing ‘widths’ will be equal.

There’s no need to have equal borders on every side. Top, right, bottom, and left borders can be specified individually like this:

Paragraph with unequal width top/bottom and right/left double borders.

or you can choose only one like this

Paragraph with double border left Paragraph with double border left Paragraph with double border left Paragraph with double border left

In the above examples, I have applied double border styles to paragraphs but, of course, you can apply the styles to any element.

I don’t advocate using double borders ad infinitum but they can provide an alternative that gives greater emphasis to a specific element. Why not try some different examples yourself?

Comments

22 Jan 2007 12:05:10 Nice, this is well supported cross-browser too. Another underused property value!

15 Dec 2007 01:20:03 Any idea how to do a double border that has two different colors? One inner color and one outer color?

15 Dec 2007 10:02:06 @Casey. I don’t know that you can do this with the double border property. The CSS3 specification adds some additional border properties, for example image backgrounds for borders, but this may not be supported for some time. I think you will probably need to use two elements to create the effect of differently colored outer and inner borders. In some cases, this may means that you need to add an additional non-semantic element into your HTML . However, I would always try and use existing elements first before adding other elements just for visual purposes. For example, a paragraph within a div tag, each with their own borders and the appropriate padding and margin properties, can achieve a similar effect.

05 Jan 2009 15:32:34 Hello, this works, thank you!
However, is there any way you could do the outside border with one color, and the inside border with another color?
Please help me, I want to know if it’s possible. Thanks

02 Jun 2009 09:57:00 @Vic. In fact, the outline property has been around for at least 3-4 years now. I wrote a blog post about it in 2006! The outline property is supported by IE8 [running in IE8 mode] so it may become more widespread as IE8 usage increases.

23 Apr 2011 20:26:14 I had my border set to 2px and it was appearing solid. I have been banging my head against the wall for hours. Thank you so much. I couldn’t figure out what was wrong. Changing the width to at least 3 showed some spacing between the borders. Now I can finally relax.

07 Aug 2011 03:41:13 Is it possible to change the dimensions of the line in between the two borders while using double property ?

07 Aug 2011 09:57:24 @Rakesh: There’s no way of doing that in a predictable way as far as I know. It is possible to change the double border values to numbers that are not mulitples of 3 and this will sometimes change the spacing width. However, it’s not very predictable between browsers – at least when I tried it.

Comments are OFF for this post.

The Perchology Newsletter is full of interesting and relevant links about Perch CMS

Related Articles

Learning about CSS Grid Layout

There’s an exciting new CSS layout method in the latest versions of Google Chrome, Firefox and Opera. That’s CSS Grid Layout which promises to revolutionise how we create page layouts. Here are a few links I’ve collected about Grid Layout.

List item bullet points with the ::before pseudo-element

I was checking out the Guardian’s website recently (in Chrome DevTools, as you do) and spotted how they use the ::before pseudo-element to create list item bullet points. Here’s how it’s done.

Источник

6 Ways to Create a Double Border in CSS

Invicti Web Application Security Scanner – the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

Borders are crucial in web design/ development as they can draw attention to users or separate content in a web page. You can use the border shorthand when you want all four borders on an HTML element to be the same.

On the other hand, you can also use the border color, border style, and border-width longhand properties to make every border different/ unique. When you want to specify the border’s color, we use border color, use border width to determine the border’s width, and specify whether a border will be dashed, double, or solid using the border-style property.

You can also target individual borders using properties such as border-block-start and border-top

A double border is when two parallel lines surround an HTML element. The two lines are separated by a gap that can be left transparent or filled with an image or a background color.

For instance, we can have a sign-up/login button surrounded by a double border.

Why double border?

• Separation: You can use a double border to increase the readability and scannability of a web page by separating different HTML elements. For instance, you can have double borders to separate elements such as headers, body, and footers on a web page.
• Visual appeal: You can use different/contrasting colors on the double borders to make different elements more visually appealing.
• Show hierarchy: You can clearly distinguish between the important and less important elements on a web page using double borders.
• Ease customization: You can create personalized and unique designs with the help of double borders. For instance, you can change the color or width of each line.
• Emphasis: Using the double border property, you can draw attention to specific links or buttons on a web page.

You can use the following ways to create the double border in CSS.

Using border-style Property

The border-style property sets the style of the four borders of an element. We use the double keyword to set the style in this case. When we use the double keyword, automatic padding is created between the two borders.

For demonstration purposes, we will set the border width to 15px. We will also pick our border color to be red and indicate the border style as double.

         
Border Property 
  

The output will be:

Using linear-gradient() function

This function sets a linear gradient as a background image. The result is a gradual transition between two colors along a straight line. We use the keyword to to mark the starting point of the gradient line. If the order is unspecified, the default value is to bottom .

The code below gives our box a 7px border width. We can then specify the linear gradient on the background property of each side of the box.

        
linear-gradient() function 
  

The output will be:

Using Outline Property

An outline is a line drawn outside the border of an element. This achieves the double border effect, and we can use an outline and a single border. We must use outline-offset to add a space between the border and outline properties.

        
Outline Property 
  

The rendered page will appear as follows:

Using box-shadow Property

The box-shadow property adds a shadow effect around the frame of an element. You can have multiple box-shadow effects separated by commas. Start by ensuring that the offset and blur settings are zero, and then set the shadows to the proper sizes.

        
Box Shadow Property 
  

The rendered page will appear as follows:

Using background-clip Property

The background-clip Property determines how far the background should extend within an element. The extension can be on the border-box, padding-box, or content-box.

        
Background-Clip Property 
  

The rendered page will appear as follows:

Using Pseudo Elements

Pseudo-elements, represented by ::before and ::after selectors allow web designers to style parts of an HTML document without adding markup to the code.

We can illustrate how to use pseudo-elements to create a double border using this code:

HTML document

        
pseudo property 
  

* < padding: 0; margin: 0; box-sizing: border-box; >body < display: flex; justify-content: flex-start; gap: 25px; padding: 15px; >div < width: 150px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; >.box < background-color: brown; >box < background-color: rebeccapurple; position: relative; border: 8px solid red; >.box::before

The rendered page will appear as follows:

Real-world examples of double-border CSS

The double border CSS property is used in many websites. You must combine double border property with other CSS properties to get the best out of it. The following are two examples of the double border in action;

The “Cart” button on Amazon

Amazon is one of the biggest names in the e-commerce space. Its cart button has a double border CSS for visual aesthetics and prompts users to act.

The double borders appear when a user hovers over the ‘cart’ button. The borders are also visible when you hover over Amazon’s navigation menu.

Mailchimp buttons

Mailchimp is an email marketing service that allows users to create, launch and track campaigns. Its website uses double border effects on various sections. The sign-up and login buttons have double borders to ‘create’ a sense of urgency as users browse through.

The border on the bottom side of these buttons thickens as a user passes a cursor through them.

Best practices when using double-border CSS effect

It is easy to get carried away when you are using double CSS. The end goal is to ensure that users navigate easily and emphasize the major areas on your site. Follow these best practices:

• Use a consistent style: If you use double borders, ensure the style is consistent on all elements. For instance, double borders can be used on the navigation, call-to-action, and sign-up/login buttons. If possible, ensure you have the same colors and margin thicknesses across elements with double borders.
• Ensure these double borders work on different devices: We live in a world where people browse websites from smartphones, PCs, and tablets. Test to ensure double borders are displayed as expected on various screen sizes.
• Use them sparingly: You may be tempted to overuse a certain CSS effect after discovering it for the first time. However, double CSS suits various elements on a web page. Only use this property in areas where it adds value to the design.

Conclusion

We have highlighted the major approaches you can use to create a double border in CSS. The choice of approach will depend on what you want to achieve with the double border and your preferences. You can decide to stick to one or a combination of several double-border styles on the same page.

You can check out these CSS resources to understand Cascading Style Sheets in detail.

Источник