![]() ![]() You can play around with the sub-properties to get a better understanding of how they work. So, border-color is a shorthand for border-top-color, border-right-color, border-bottom-color, and border-left-color.īelow are snippets of code and their respective screenshots showing the three sub-properties of border in action: So if you don’t specify a value for it, black is automatically set as long as you have the border-width and border-style set to some values.Īs it goes with border-width and border-style, you can also specify different colors on all the sides of the border. You can specify this color with named, RGB, and HSL colors – there are no limits.īlack is the default color for this property. ![]() The border-color property lets you specify different colors for your border. So again, you can specify different values for the properties if you don’t want to use the shorthand. Just like border-width, border-style is a shorthand for border-top-style, border-right-style, border-bottom-style and border-left-style. It takes none (the default), solid, dashed, dotted, double, groove, ridge, inset, and outset. With the border-style property, you get access to different styles you can apply to the border of a box. So, if you want, you can apply different width values to the border-top, border-right, border-bottom, and border-right. ![]() The border-width property is a shorthand for border-top-width, border-right-width, border-bottom-width and border-left-width, moving in a clockwise direction. The value is commonly expressed in pixels (px), but it can be expressed in rem, em, and percentage (%).Īnd it doesn’t end there – this property also takes thin, medium, and thick as values. You use the border-width property to specify the width of a border. Let's take a look at each of them one by one. So, in addition there are the border-width, border-style, border-color, and border-radius sub-properties. What is the CSS border property?īorder is not all the border property entails – though it is important to note that it’s a very useful shorthand, which we will get to later in this tutorial. This will help you get comfortable with it and start using it in your next coding project. In this tutorial, we will look at CSS's border property in detail. Getting familiar with this property can really help you debug more effectively and design your web pages more beautifully. The CSS border property allows us to do several things with the border of individual boxes. And each box – whether it's text, an image, a div, a span, or any other element – has a border that separates its edges from other boxes around it. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |