CSS Borders: Create Border and Shapes with CSS

Today, you will learn about lot of interesting things about CSS. In coming section of this post it will teach about Creating CSS border style, CSS border radius, CSS border color, CSS border width etc. Moreover, you will also able to incorporate CSS bubble speech into your project.

Of course, we all are well acquainted with borders. Today, I have something new for borders that you will know through this tutorial post. Hopefully, you might want to incorporate some rounded corner to your web-design. As, myriad of options are sit over there with distinct application. Here, we are going to discuss about CSS3. Thus apart of CSS3, plain-ole’ CSS can be also employed to create rounded corners including several custom shapes.

The Basics

Perhaps you all be acquainted with the fundamentals of borders.

The above snippet will provide border to an element of 1px, simple and plain, but also you can alter the syntax as below in order to obtain distinct sets of CSS border width.

However, you can assign three keywords i.e. thin, medium, and thick alternatively towards specifying border-width value.

Initially, it might be seems to be unnecessary while employing the long-hand form, some other handy cases also exist there which are very advantageous. For instance, you may need some requisite to update some parameters when any specific event occurs.

There might be probability to alter a border-color when a user/visitor hover over a specific component. The shorthand form you would like to employ is to modify the values of pixel.

Updating the border-color property is also falls under one more elegant and DRY (Don’t Repeat Yourself) method.

In addition, you will designate the long-hand technique later that will be proved to be useful while you attempt to create custom shapes with CSS.

Border-Radius

border-radius” is widely knows as CSS’s golden child. All browsers are capable to show the rounded corner except Internet Explorer 8 and below. Earlier, in order to implement it accurately, it was necessary to employ vendor prefix for both Mozilla and Webkit.

However, in recent you can eliminate the vendor version without meeting any hurdles and simply incorporate this in its official form: border-radius.

Border-Radius

Moreover, you can also assign the value for each side of a box accordingly you wish to create.

Border-Radius

In the above snippet of code, setting border-bottom-left-radius and border-top-right-radius to zero would be considered as redundant until the component is delivering the values are required to be reset. Likewise, padding or margin, these attributes can be also squeezed to a single property, if necessary.

Just comprehend with this illustration as many web-designers most often opt to perform this, In account of CSS and the property of border-radius a lemon shape can be reproduced like this:

Beyond the Basics

Most of the web-designer opt to go with the tips outlined and hence in this post. Moreover, we have some certain options available in account of which we can enhance a step forward.

Multiple Borders

A wide length of techniques are available that you can refer to while accomplishing the task of implementing multiple borders to an element.

Border-Style

For border-style property solid, dotted and dashed are considered as the most frequent value being employed. However, in addition ridge and groove are also in the list that can be employed.

Or, in long-hand form:

Border-Style

Though, it is quite useful, a groove or ridge effect are not multiple borders in real.

Outline

outline property is the most effective and excellent technique available in order to creating two borders.

Border-Style

However, this techniques literally work excellently, though comprises one downside of limitation upto only two borders. Therefore, it is necessary to look for another approach while intending to convey a layered, gradient-esque effect.

Pseudo Elements

When it seems that outline technique is not efficient, you are supposed to take advantage of another alternate approach i.e. :before and :after elements. Thus, you can achieve any additional or necessary borders likewise below listed border image.

Pseudo Elements
However, might be it wouldn’t be an excellent approach, but though it is one among those who eventually get your job accomplished. Also, it alarms regarding a confusion that sits in order where border colors are to be employed. Therefore, in context to implement the correct sequence a “guess and check” option is often required.

Box-Shadow

In order to create an unlimited quantity of borders you are supposed to utilize achievements of spread parameter in the box-shadow CSS3 property parameter.

Box-Shadow

Here in this case we are behaving wisely as employing box-shadow in such a manner that is supposed to be superfluous and have been planned while the specification was written in true copy.

Beyond defining the value 0 to x, y, and blur elements, you can make use of spread value towards creating solid borders at those locations where you want. As box-shadows can be congregated by means of comma and thus result in countless possible levels.
This technique is excellent and act nicely that will make you amazed. In case of older browser which couldn’t designate the box-shadowproperty, thus simply transform the 5px red border.

Modifying Angles

Apart of defining a single value to border-radius, you have an alternative to specify two separated by a / in context of defining unique values for both vertical and horizontal radii.

As for example:

is equivalent to

This technique is quite obvious and useful when you are supposed to imitate a subtle, lengthy curve instead of a regular rounded corner. As an illustration, the below listed code will enable you to break a square shape mildly and delivers a curled paper-like effect.

Modifying Angles

CSS Shapes

The accurate utilization of border is supposed to be when they are brilliantly implemented to the elements of zero height and width. Confusing! Let’s consider this illustration.

Assume this below provided markup for next distinct examples.

and the following base styling:

While exposing about how CSS shapes can be implemented in a project, is supposed to generate an obligatory arrow.

The main aspect of comprehending regarding how an arrow will be created with CSS is to designate an unique border-color to every side. Next you are supposed to chop the height and width for container to 0. Consider a div with class of arrow as the container.

As we discussed above in the beginning of this article, a cleaner syntax would be not incorporating short-hand version:

Further, you can also compact this in account of congregating together the values of color.

CSS Shapes

However, when you will move to a step back, it will convey an perfect sense. Thus, it is supposed to be one feasible way for aligning the colors in account of assuming a height and width value zero for the container. Therefore, lets see what when we all border-colors set to transparent except for the blue side?


Brilliant, But it doesn’t considered as too linguistic to generate an .arrow div, in the purpose of including an arrow to the page. However, Rather than of that, pseudo elements might be implemented effectively to the arrow as suffix or prefix with associated element.

Creating a Speech Bubble

In order to create a pure speech bubble in CSS, we begin the markup as sits below:

Later, you are required to implement some base styling

Creating a Speech Bubble
This arrow will be employed with after psuedo-element.

However, at this turn, it is supposed to be simply a thing of arrow reproduction and defining it at the accurate position. Hence, we initiate towards this endeavor through accurately positioning the content, implementing the colors for borders and resetting the height and width.

Creating a Speech Bubble
While attempting to build shapes in CSS, the border-width property must be employed rather than of width property as it can’t assign amount of arrow width that should be. Here, you are required to keep the arrow something larger, so you may increase border-width by 15px. Moreover, you can also put the arrow at center or bottom of the container in account of left and top properties, respectively.

Creating a Speech Bubble

Eventually, we are about to employ final step to upgrade the arrow color that should be identical to the background color of container. The positioning are also required to be altered to account in context of borders width (15px). Apart of this, you are also required to implement subtle border-radius in order to create the container which appears to be bubble like.

Creating a Speech Bubble
Next, you can abstract this snippet code towards some reusable classes and valuable for all other future projects.

Creating a Speech Bubble

Bonus: Better Vertical Centering

One drawback of employing line-height with center aligned text is that you are limited a only one line. The height of each line will appear to long, in the case when the text requires multiple lines. One excellent solution towards this context is to designate a display of table to the speech bubble, as well as a display of table-cell for the paragraph which results in wrapping the text. Thus, it will enable you to align the text to the center and accordingly.

Next, the transformed CSS

Bonus: Better Vertical Centering

Beyond this you are not limited to create triangles only, but with CSS you can produce almost all kinds of shapes including hearts and biohazards symbols and signs.

Bonus: Better Vertical Centering

However, no doubt that simple border: 1px solid black syntax is quite obvious. So, if you employ it excellently, you can make a wide length of useful effects, shapes and icons. Thus, one most notorious thing is that the styling for speech bubbles and common shapes can be created only once and later can be presented as utility classes for further usage.

Steven Bowen

Steven Bowen is an ardent team member of No-refresh - Web to Print Design Tool Provider Company bestowed with professionalism in to develop fully-functional solutions. Having adroitness in this arena, he has served an array of blogs that are basically based on the technology advancement & improve the end users’ information level.