I don't advocate using double borders ad infinitum but they can provide an alternative that gives greater emphasis to a specific element. In the above examples, I have applied double border styles to paragraphs but, of course, you can apply the styles to any element. Paragraph with double border left Paragraph with double border left Paragraph with double border left Paragraph with double border left Paragraph with unequal width top/bottom and right/left double borders. Top, right, bottom, and left borders can be specified individually like this: There's no need to have equal borders on every side. 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. In this case, the outer border, inner border and spacing can vary between browsers. This is a paragraph with 4px top double border. Testing in different browsers is probably a good idea. In this case, Firefox 2 seems to do things differently and appears to increase the spacing to 2px. For example, in IE7 a width of 4px will give an outer border of 2px, spacing of 1px and inner border of 1px.
This means that double borders of unequal widths are possible. 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 is a paragraph with a double border width of 5px The CSS ID needs to be different for each word. Switch over to the text tab of your headline copy and add a different div to each word of your headline.
Add Div Tags to Each Word in H1 Headline. Then, add a Text Module with an H1 headline of your choice. However, the following style rule will widen the inner and outer widths without changing the spacing Add Text Module to Column Add H1 Content. In the above example, each 'border' is 1px with a gap of 1px between them. This is a paragraph with a 3px double border and border color #999Ĭhoose your width carefully because this will affect the width of each inner/outer 'border' and spacing. Choose a border width of 3px or more and a color and there you have it!įor example, this style rule gives a double border: 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'. I used solid borders almost exclusively until I discovered that there were other possibilities including double borders. For me, this used to be the case with the border property. However, it can also be useful to try out CSS properties that you are not so familiar with.
#Css add border to text code#
Here we discuss the basic concept and how does Curved Border work in CSS along with different examples and code implementation.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. After applying curved radius output shown like above. Example #5Įxplanation: In the above code border radius applied for an image.
Example #4īorder-radius with top-left and top-right values for images:Įxplanation: In the above code, border-radius applied bottom-left and bottom-right value for images. Example #3Įxplanation: In the above code, border-radius applied top-left and top-right value for images. Example #2īorder-radius with 2 and 1 values for paragraphs:Įxplanation: In the above code border radius applied 2 and 1 value for paragraphs.
#Css add border to text download#
Facility to download the assign task and itsĮxplanation: In the above code border radius applied 4 and 3 values for paragraphs. Example #1īorder-radius with 4 and 3 values for paragraphs:įurther approval of task. Examples of CSS Curved Borderįollowing are the different examples of CSS Curved Border. Note: We can apply border-radius 2 side at a time but not one side at a time.