Border Radius Property usually uses in Card, Images, etc… . Some below property mention –
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-radius
How to use border-radius property in CSS?
Tag: property
How to use border-bottom Property in CSS?
Some Border-bottom property in below which is usually uses in CSS-
- border-bottom-style
- border-bottom-width
- border-bottom-color
- border-bottom
border-bottom-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-bottom-width–
- medium – This is default value which specifies a medium bottom border.
- thin – It specifies a thin bottom border
- thick – It specifies a thick bottom border
- length – We can define bottom border length in the form of % px etc.
border-bottom-color–
- color value
- transparent
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 10px;
}
</style>
</head>
<body>
<h2> A heading with a solid blue bottom border</h2>
</body>
</html>
border-bottom–
Syntax:-
selector{ border-bottom: border-bottom-width border-bottom-style border-bottom-color;}
Ex:-
h2{ border-bottom: 10px solid #1c87c9;}
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>
How to use border-top Property in CSS?
Some Border-top property in below which is usually uses in css-
- border-top-style
- border-top-width
- border-top-color
- border-top
border-top-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-top-width–
- medium – This is default value which specifies a medium top border.
- thin – It specifies a thin top border
- thick – It specifies a thick top border
- length – We can define top border length in the form of % px etc.
border-top-color–
- color value
- transparent
border-top–
Syntax:-
selector{ border-top: border-top-width border-top-style border-top-color;}
Ex:-
p{ border-top: 10px solid red;}
How to use border-right Property in CSS?
The border is a Property in CSS which is used in Element with the help of CSS. So below border-right property is usually uses –
- border-right-style
- border-right-width
- border-right-color
- border-right
border-right-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-right-width–
- medium – This is default value which specifies a medium right border.
- thin – It specifies a thin right border
- thick – It specifies a thick right border
- length – We can define right border length in the form of % px etc.
border-right-color–
- color value
- transparent
border-right–
Syntax:-
selector{ border-right: border-right-width border-right-style border-right-color;}
Ex:-
p{ border-right: 10px solid blue;}
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;}
How to Use Padding Property in CSS?
Its shorthand padding property It declares all padding properties in one single line. We can set this property to length in the form of %, cm, px etc.
Padding Property–
- padding
- padding-left
- padding-right
- padding-top
- padding-bottom
Padding–
This property is used to set the padding of specified element.
Ex: –
img { padding: 10px 20px 30px 40px;}
padding-left–
This property is used to set left padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-left: 20%; }
h1 { padding-left: 40px; }
padding-right–
This property is used to set right padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-right: 20%; }
h1 { padding-right: 40px; }
padding-top–
This property is used to set top padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-top: 20%; }
h1 { padding-top: 40px; }
padding-bottom–
This property is used to set bottom padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-bottom: 20%; }
h1 { padding-bottom: 40px; }
How to use Margin Property in CSS?
margin–
Its shorthand margin property It declares all margin properties in one single line. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.
When we set auto value browser decide the margin.
Ex: –
img { margin: 10px 20px 30px 40px;}
Margin Property
This property is used to set the margin of specified element.
- margin-left
- margin-right
- margin-top
- margin-bottom
- margin
margin-left–
This property is used to set left margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.
When we set auto value browser decide the margin.
Ex: –
img { margin-left: 20%; }
h1 { margin-left: 40px; }
p { margin-left: auto; }
margin-right–
This property is used to set right margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.
When we set auto value browser decide the margin.
Ex: –
img { margin-right: 20%; }
h1 { margin-right: 40px; }
p { margin-right: auto; }
margin-top–
This property is used to set top margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.
When we set auto value browser decide the margin.
Ex: –
img { margin-top: 20%; }
h1 { margin-top: 40px; }
p { margin-top: auto; }
margin-bottom–
This property is used to set bottom margin of element. We can set this property to auto or length in the form of %, cm, px etc. It is by default set 0px.
When we set auto value browser decide the margin.
Ex: –
img { margin-bottom: 20%; }
h1 { margin-bottom: 40px; }
p { margin-bottom: auto; }
How to use the position property in CSS to align elements?
In This tutorial, I am going to explain that how to How to use the position property in CSS to align elements? Below Property to uses in align elements-
Position-
- Left
- Right
- Bottom
- Top
- static
- Fixed
- Relative
- Absolute
Length (cm, px, %)
Left Align Property-
- left: auto
- left: 55px
- left: 50%
Right Align Property-
- right: auto
- right: 23px
- right: 50%
Bottom Align Property-
- bottom: auto
- bottom: 23cm
- bottom: 40%
Top Align Property-
- top: auto
- top: 20%
- top: 40px
static–
When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. left, right, top and bottom property won’t work with static position.
Ex: –
h1 {
position: static;
border: 5px solid red;
}
h1 {
position: static;
border: 5px solid red;
left: 50px;
}
fixed-
When we set fixed position for an element it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
img {
position: fixed;
right: 0;
top: 50%;
border: 3px solid red;
}
relative-
When we set relative position for an element, elements positioned to its normal flow.
h1 {
position: relative;
left: 50px;
border: 3px solid red;
}
absolute-
When we set absolute position for an element, element is positioned to the nearest positioned ancestor. If there is no positioned ancestor then it follow the normal position according to browser.
div {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}
These properties are used to position an element.
We can not use any of these properties without setting up position property.
How to use Link Property in CSS?
When you use the “<a>” tag on your HTML page then show text color automatic blue & underline. If you want to implement in your tag using CSS then implement the below property-
Ex:-
a:link {
color: red;
}
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
How to use Visibility Property in CSS?
This property is used to specify whether or not an element is visible. We can set this property to visible (default), hidden or collapse.
hidden –
The element is invisible not removed.
collapse-
This value is only used for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it will be treated as “hidden”.
Ex:-
p { visibility: hidden;}
