CSS Border

In CSS, the border property is used to define the border of the element. Today I will introduce you to this CSS property and how to enter border data in Shopify.

1. CSS border property:

1.1. Structure:

tag {
    Properties: value;

1.2. Attributes and values:

Properties ValueExampleDescription
border-color color code
color name
RGB value
border-color: #ff0000;
border-color: red;
border-color: rgb(255,0,0);
Defines the color
of the border.
border-stylethe style for the border
(See the table below)
border-style: solid;Defines the shape
of the border.
border-width: 5px;Specifies the thickness
of the border.
Format properties
noneborder: none;Defines the element that will not have a border.
hiddenborder: hidden;Same as none, but used for the table.
dottedborder: dotted;Defines the border for the element to be dotted.
dashedborder: dashed;Defines the border for the element to be dashed.
solidborder: solid;Defines the border for the component to be a solid line.
doubleborder: double;Define the border for the component to be 2 straight lines.
grooveborder: groove;Defines the outline for the component to be a groove.
ridgeborder: ridge;Defines the contour for the element to be the ridge.
insetborder: inset;Defines the border for the element to be the inner shadow.
outsetborder: outset;Defines the outline for the element to be the outer shadow line.
inheritborder: inherit;Define property inheritance from the parent element.
Style for border
border-topOne or more values ​​of the format attribute.border-top: #ff0000 solid 2px;Defines the top border.
border-rightOne or more values ​​of the format attribute.border-right: #ff0000 solid 2px;Defines the right border.
border-bottomOne or more values ​​of the format attribute.border-bottom: #ff0000 solid 2px;Defines the bottom border.
border-leftOne or more values ​​of the format attribute.border-left: #ff0000 solid 2px;Defines the left border.
borderOne or more values ​​of the format attribute.border: #ff0000 solid 2px;Define all the surrounding borders in order top right bottom left.
Location attribute

Although we use a lot of such attributes, we only need to pay attention to the ‘positional attributes’ to be able to use all the necessary forms, only special cases need to use these attributes. ‘format properties’.

The structure is as follows:

tag {
    Properties: width style color;

Note: you can set the width, style, and color properties in any order.

2. Apply border-width property in Shopify:

If you are using the Alothemes Shopify theme, then we have built this attribute in the customize part of the theme. At each configurable border location, we will attach a link to this article to help you understand and be able to customize it yourself. So you can add a custom border by following steps:

2.1. Login and choose to customize.

Log in to your Shopify store, click Online Store > Choose a theme you want to customize > Click Customize

login & choose customize

2.2. Customize border in settings.

Customize border
  • Show Border (May or may not): Tick ​​to use the border. If you don’t tick, the border won’t show.
  • Border width (The unit of the border is px, pt, em, rem. But mainly use px ): The width of the border. If you fill in 1 value, the border on 4 sides will be the same, but if you fill in 4 values ​​(each value is separated by 1 space), the border width will display in the order of top right bottom left (You can review part 1 of this article to understand better).
  • Border style: the style of the border, You can choose different options to see the difference.
  • Border radius: Corner of the border. About the value is the same as border width.
  • Border color: Color of the border.

Above are some brief instructions on the CSS border and how to configure it in the Shopify theme. Hope to be of help to you. Goodbye and see you again.