border
Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none .
Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
Синтаксис
Свойство border указывается используя одно или более значений <br-width> , <br-style> , и <color> указанных ниже.
Значения
Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .
Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).
Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).
border¶
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
- border
Синтаксис¶
Значения¶
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
CSS Border
In this chapter, we will speak about borders and how we can give styles to them. We can give width, style and color to the border.
Example of the border property:
Result
Border Width
The border-width property sets the width of a border.
The width can be specified in pixels. It can also be specified by one of the three pre-defined values: medium, thin, or thick.
You cannot use the «border-width» property alone. It will not work. Use «border-style» for setting the borders first.
Example of the border-width property:
Border Color
The border-color property is used to set the color of a border. The color can be set by:
- name — specifies a color name, like «red»
- RGB — specifies a RGB value, like «rgb(255,0,0)»
- Hex — specifies a hex value, like «#ff0000»
You cannot use the «border-color» property alone. It will not work. Use «border-style» for setting the borders first.
Usually, we write these three properties together in one row.
Example of the border-color property:
You can try other examples with our CSS Maker tool.
Border Style
The CSS border-style property sets the style of all four sides of an element’s borders. Borders are placed on the top of an element’s background. It can have from one to four values. So, each side can have its value. The default value of border-style is none.
Border-style has the following values:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one.
CSS Border for individual sides
CSS provides properties that specify each border (right, left, bottom and top).
The border-style property can have 4 values, for example, border-style: dotted solid double dashed; where the top border is dotted, the bottom border is double, the right border is solid, and the left border is dashed.
The border-style property can have 3 values, for example, border-style: dotted solid double; where the top border is dotted, the bottom border is double, and the right and left borders are solid.
The border-style property can have 2 values, for example, border-style: dotted solid; where the right and left borders are solid, and the top and bottom borders are dotted. And, of course, this property can have only 1 value, for example, border-style: solid; where all the sides are solid.
Example of the border properties for individual sides:
CSS border as a shorthand property
The CSS border property is a shorthand property for the following individual border properties:
- The CSS border-width property, which sets the width of all four sides of an element’s border.
- The CSS border-style property, which sets the style of all four sides of an element’s borders.
- The CSS border-color property, which sets the color of all four sides of an element’s border.
Example of the border shorthand property:
Rounded borders
Using the CSS border-radius property, you can add rounded borders to an element.
Example of the border-radius property:
The difference between borders and outlines
Outlines and borders are usually confusing because they are very similar. But there are differences between these two:
CSS Border – Style and HTML Code Examples
Kolade Chris
In CSS, everything is a box. 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.
The CSS border property allows us to do several things with the border of individual boxes. Getting familiar with this property can really help you debug more effectively and design your web pages more beautifully.
In this tutorial, we will look at CSS’s border property in detail. This will help you get comfortable with it and start using it in your next coding project.
What is the CSS border property?
border 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.
So, in addition there are the border-width , border-style , border-color , and border-radius sub-properties. Let’s take a look at each of them one by one.
CSS border-width property
You use the border-width property to specify the width of a border. The value is commonly expressed in pixels (px), but it can be expressed in rem, em, and percentage (%).
And it doesn’t end there – this property also takes thin , medium , and thick as values.
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. So, if you want, you can apply different width values to the border-top, border-right, border-bottom, and border-right.
CSS border-style property
With the border-style property, you get access to different styles you can apply to the border of a box. It takes none (the default), solid , dashed , dotted , double , groove , ridge , inset , and outset .
Just like border-width , border-style is a shorthand for border-top-style , border-right-style , border-bottom-style and border-left-style . So again, you can specify different values for the properties if you don’t want to use the shorthand.
CSS border-color property
The border-color property lets you specify different colors for your border. You can specify this color with named, RGB, and HSL colors – there are no limits.
Black is the default color for this property. 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.
As it goes with border-width and border-style , you can also specify different colors on all the sides of the border. So, border-color is a shorthand for border-top-color , border-right-color , border-bottom-color , and border-left-color .
Below are snippets of code and their respective screenshots showing the three sub-properties of border in action:
You can play around with the sub-properties to get a better understanding of how they work.
The border shorthand
We’ve applied the border sub-properties ( border-width , border-style , and border-color ) one by one, but they can be applied together with the border shorthand.
This shorthand is useful especially when you want all four sides to be the same like I have done below:
CSS border-radius property
With border-radius , you can remove sharp edges from the borders in order to make them into rounded corners. I think this makes them more beautiful, too.
The value is specified in pixels (px), and percentage (%) too, depending on how you prefer it.
If you want to, you can also specify a different radius for the top, left, bottom and right edges of the border with border-top-right-radius , border-top-left-radius , border-bottom-right-radius and border-bottom-left-radius . This is because border-radius is also a shorthand for those four sub-properties.
We can apply some radii to our borders too:
A small project: How to Use the CSS border Property to Make the Olympic Rings
We can take what we’ve learned about the border property and combine it with CSS Positioning and Flexbox to make the Olympic Rings.
So what’s going on in this code?
The Olympic Rings have 5 circles – 3 at the top and 2 at the bottom – with colors blue, black, red, yellow, and green, respectively.
To make a circle with the border-radius property, we set the width and height to 12.5rem each, then the border-radius itself to 50%. This is how you make a circle with CSS.
We placed the top and bottom rings in a parent container, so we’re able to place them one on top of each other with CSS Flexbox. But that didn’t complete the job, so we used the transform property of CSS animation to get it done.
Finally, we made some little tweaks with CSS Positioning to get the rings interlocked.
In the end, we get the result below:
Conclusion
I hope this tutorial helps you get up and running with the CSS border property so you can make effective use of it in your projects.