In this blog, I am creating a creative rotated text border effect & social media icons hover transforms using HTML & CSS. So, Let’s create an index.html & style.css below-
Tag: Border
How to create a creative border card hover effect with a background translation using HTML & CSS?
In this blog, I am creating creative a border card hover effect with a background translation using HTML & CSS. So, Let’s create an index.html & style.css below-
How to create a creative menu border rotation & sniper effect using HTML & CSS?
In this blog, I am creating creative a menu border rotation effect using HTML & CSS. So, Let’s create an index.html & style.css below-
How to use border-left Property in CSS?
The border is a Property in CSS which is used in Element with the help of css. So below border-left property –
- border-left-style
- border-left-width
- border-left-color
- border-left
border-left-style–
- none – This is default which specifies no border.
- hidden – This is very similar to none value, except in border conflict resolution for table elements
- solid – It specifies a solid border
- dotted – It specifies a dotted border
- double – It specifies a double border
- dashed – It specifies a dashed border
- groove – It specifies a 3D grooved border.
- ridge – It specifies a 3D ridged border.
- inset – It specifies a 3D inset border.
- outset – It specifies a 3D outset border.
border-left-width–
- medium – This is default value which specifies a medium left border.
- thin – It specifies a thin left border
- thick – It specifies a thick left border
- length – We can define left border length in the form of % px etc.
border-left-color–
- color value
- transparent
border-left–
Syntax:-
selector{ border-left: border-left-width border-left-style border-left-color;}
Ex:-
p{ border-left: 10px solid red;}
CSS border- collapse property
This property set the border of the table cells ans specifies wheather the table cells share the seprate or common border.
This property has two main values that are seprate and collapse. When it is set to the value seprate, distance between the cells can be defined using the border-specing property. When the border-collapse is set to the value collapse, then the inset value of the border-style property behaves like groove, and the outset value behave like ridge.
Syntax:-
border-collapse: separate| collapse| initial | inherit;
Property values:-
seprate:- It is the default value that seprates the border of the table cell. Using the value, each cell will display its own border.
collapse:- The value is used to collapse the borders into a single border. Using this, two adjacent table cells will share a border. When this value is applied, the border-spacing property does not affect.
initial:- It sets the property to its default value.
inherit: It inherits the propperty form its parent element.
Example- Using seprate value
Example:- Using collapse property:-