Web pages are built from boxes and each box has its own border with you are able to style using CSS border properties. At first look, it looks easy. Using CSS border you can set border style and the border width, even round the box corners. But this is only the beginning. There is more information that you need to know if you want to manage a web view. In this post, I wrote about several useful things about CSS border and box calculations.
First of all box-sizing
We are living in an era when each pixel count. UX and UI are used to build a competitive advantage by means that every single pixel on web site matters. If so, you need to know how web browsers count spaces that each box takes on the web page. For example, when you set a text box that will have 100 px width and add to this box the CSS border witch width will be set on 1 px finally your text box will occupy 102 px. As I mentioned before these 2 px counts. Below I paste an image, that shows how web browsers count box size.
Now you can add all this value: text width, padding width, border width, and margin width to keep the idea of pixel-perfect web page building, or there is the simplest way to keep box sizing in the control. You can use CSS properties called box-sizing. It has two options:
- Border-box – that inform web browser that all box size including content inside and CSS properties like padding, border, and margin should be equal assigned value;
- Content-box – that inform web browser that assigned width and height value of the box doesn’t include CSS properties like padding, border, and margin.
As you see this is a very important CSS value when you want to build pixel-perfect web pages. Even if you just want to make a web page fit to screen it’s also helpful.
CSS Border common properties
Now we can dive into border properties. Let’s start with the most common, and after this, I show you how to build a CSS border with sharp edges.
First of all, you can set the width and color of the CSS border. You can do this for all parts of the border using CSS properties border-width and border-color or set a different value for all parts unique using properties like border-top-color or border-right-width. Just add which part of the border should be styled, and you get it.
You can also set different colors or border width for each parts of CSS border using description like this: border-width: 1px 2px 1px 2px. Like in all CSS properties writing in this way, properties are related to the following peace of border: top, right, bottom, left.
You are able also to round the border corners.
Just like in the width and color properties, you can set border-radius for all corners in one line of code or set for each corner a unique value.
Border-radius: 40px;
Border-radius: 12px 14px 12px 14px.
Border-top-right-radius: 12px.When you set all CSS border-radius properties in one line, they are related in this order: top-left, top-right, bottom-right, bottom-left.
You can also achieve an even better effect by setting different border-radius in each half of the edge. When you set CSS properties like these:
Border-top-right-radius: 20px 30px; Then left half of the edge will be radius by 20px and the right site will be radius by 30px. This allows you to build interesting shapes. But what if you like to cut straight one of the corners?
CSS Border corner cut
This isn’t available at all when you using only border-radius properties. But it is available when you use some tricks to do that.
The first trick is that you will use ::before pseudo-element to build a roof of the box, and then you will be able to made a sharpie cut in the edge. All magic behind the scene relies on made border-right or left transparent. There are three elements to manipulate: width of mine element and the “roof” and border-right or border-left to made sharpie cut.
Below you can see how it’s works and how the code looks like.
See the Pen Box with a sharpie cut edge by Krzysztof (@Dekstryn) on CodePen.
The second trick is based just on CSS properties “clip-path: polygon”. Using these properties you are able to cut the edges as you like. You can build several different shapes using these properties. One disadvantage is that border properties don’t work fine with these properties.
See the Pen Button made by poligon path by Krzysztof (@Dekstryn) on CodePen.
The last trick you can use to achieve similar effects relies on background properties named linear-gradient. Just like the properties above allows you to cut edges of the background. And also have these same disadvantages that disable the border option, because the border will wrap the whole box.
See the Pen Sharp corner from linear-gradient by Krzysztof (@Dekstryn) on CodePen.
Several ways to achieve your goal
As you can see you can use these effects using different CSS properties. Unfortunately, this way to cut box shape doesn’t cooperate with CSS Border properties, but who knows, maybe one day they will.
