CSS dimension define the size and space occupied by elements on a webpage. The dimension properties like height, width, max-height, max-width, line-height and many more are used to define width, height of HTML elements in every screen sizes. In this tutorial we will learn how to manage dimension and layout of HTML elements in varying screen sizes.
CSS Setting height and width
The height and width properties allow you to set specific height and width for your positioned element.
These properties can hold following values:
length: Any unit of length (px, pt, em, in, etc.)
percentage (%): A percentage value, which is in percent height/width of the containing block.
auto: Browser calculates the height and width of the element. (For example setting height automatically to match aspect ratio of image for the specified width)
initial: Sets the value of height and width to its default value.
inherit: Inherits the value of height and width from its parent value.
Example
<!DOCTYPE html><html><head><style>
div {
height: 100px;
width: 80%;
background-color: rgb(206, 211, 225);
}
img{
height: auto;
width: 180px;
}
</style></head><body><h1>Height and Width Property</h1><h2>Length and percentage values</h2><div>
This div element has a height of 50px and a width
of 80%.
</div><h2>Auto value</h2><img src="/css/images/logo.png"/><br>
Height is this image adjusted for width 180px so that
aspect ratio is maintained.
</body></html>
The padding, margin and border are not included in height and width.
Set Max-Height and Max-Width
The max-height and max-width properties are used to set the maximum height and width of an element.
max-width: Sets the maximum width an element can be. Prevents an element from exceeding this width, even if the content inside it requires more space.
max-height: Sets the maximum height an element can be. Prevents an element from exceeding this height, even if the content inside it requires more space.
</style></head><body><div class="container"><img src="/css/images/logo.png" ><p>
This image has a maximum width and height set.
Resize the browser window to see how the image
scales down.
</p></div></body></html></pre>
Set Min-Height and Min-Width
The min-height and min-width properties are used to set the minimum height and width of an element.
min-width: Sets the minimum width an element can be. Ensures that the element doesnt shrink below this width, even if the content is smaller.
min-height: Sets the minimum height an element can be. Ensures that the element doesnt shrink below this height, even if the content is smaller.
</style></head><body><div class="container"><div class="box">
This box has a minimum width and height set.
Resize the browser window to see how the box
does not shrink below the specified dimensions.
</div></div></body></html></pre>
CSS Dimension Related Properties
All the properties related to dimensions are listed in the table below:
CSS outline creates lines around the outside of an element’s border, without affecting its size or layout. It means adding an outline won’t affect the element’s size or the positioning of adjacent elements.
Types of Outline Properties
CSS provides following outline properties to style the HTML elements.
outline-style: It specifies whether an outline should be solid, dashed line, double line, or one of the other possible values.
outline-width: It Specifies the width of an outline.
outline-color: It specifies the color of an outline.
outline-offset: It specifies the space between an outline and border edge of the element.
The outline-style Property
CSS outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element.
Example
In this example, we have set the outline-style property of each paragraph with different property values.
CSS outline-width property specifies the width of the outline to be added to the element. Its value should be thin, medium, thick, or length (in pixels, em, etc), just like the border-width attribute.
Example
In this example, we have used outline-width property to set the outline width of the paragraphs using values such as thin, medium, thick and by using length(in px).
To set the color of an outline, the outline-color property is used. If no color is specified for the outline, then the default color i.e. black will be set.
Example
In this example, we have used the outline-color property to set the outline color of paragraphs to green and red.
You can use CSS outline-offset property to set the space between an element and its outline. It is used for creating more visual separation between the element and its outline.
Example
In this example, we have used the outline-offset property to create a solid outline of grey color around div having a separation of 10px from the border.
<!DOCTYPE html><html><head><style>
div {
margin: 20px;
border: 2px dotted #000;
background-color: #08ff90;
outline: 4px solid #666;
outline-offset: 10px;
}
</style></head><body><h2>Outline-offset property</h2><div> The outline-offset is 10px </div></body></html></pre>
Outline Shorthand Property
To set the style, width, and color of an outline, we can use the shorthand outline property. The outline-offset property cannot be passed in shorthand property. It needs to be passed separately.
Syntax
The syntax for using the CSS outline property is as follows:
In this example, we have used the outline property to set the outline of the paragraph and div with different styles, colors, and widths. You can see that the outline-offset property is used separately.
<!DOCTYPE html><html><head><style>
p {
outline: solid 4px grey;
outline-offset: 2px;
border: 2px solid;
padding: 5px;
}
div {
/* You can specify in any order */
outline: 5px dashed darkred;
outline-offset: 2px;
border: 2px solid;
padding: 5px;
}
</style></head><body><p> Check the outline of the paragraph !!!</p><div> Check the outline of the div !!!</div></body></html></pre>
Using Outline With Focus
To highlight the elements when they are focused, the outline property is used with the CSS pseudo-class :focus property.
Example
In this example, we have used the outline property with the :focus property to set the outline of the input field when it is focused.
<!DOCTYPE html><html><head><style>
input {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
outline: none;
}
input:focus {
outline: 3px solid blue;
outline-offset: 4px;
}
</style></head><body><input type="text"
placeholder="Focus me to see the outline" /></body></html></pre>
Outline vs Border
Following table illustrates the differences between outline and border:
Outline is a non-rectangular shape that surrounds an element, usually with a solid color.
A border is a rectangular shape that is drawn around the content of an element.
It does not take up any space in the layout and does not affect the size or position of the element.
It affects the size and position of the element, as it adds width to the element.
It is typically used to highlight or emphasize an element, such as when an element is focused or activated.
It can be used for various purposes, such as separating elements, creating boxes, and adding visual emphasis.
See the difference of outline and border around the p
element. The outline is red in color and the border
is green.
</p></body></html></pre>
List of CSS Outline Properties
Here we have tabulated all the properties associated with CSS outline.
Property
Description
Example
outline
This example shows all the various values passed to outline as shorthand.
Try It
outline-color
This example shows all the various values passed to outline-color.
Try It
outline-style
This example shows all the various values passed to outline-style.
Try It
outline-width
This example shows all the various values passed to outline-width.
Try It
outline-offset
This example shows all the various values passed outline-offset.
CSS cursor property determines the appearance of the mouse cursor when hovering over an element to which this property is applied. Its main purpose is to improve usability by visually representing certain functions.
Syntax
cursor: value;
Property Values
Value
Description
auto
The displayed cursor is determined by the user agent based on the current context. This is the default property that the browser uses to define the cursor.
alias
The displayed cursor is alias cursor, showing there is need to generate an alias or shortcut.
all-scroll
The displayed cursor shows that scrolling is done.
cell
The displayed cursor is cell cursor, showing the option to select the table cell or a group of cells.
col-resize
The displayed cursor is coloumn-resize cursor, showing element or column may be subject to horizontal resizing, often represented as arrows pointing left and right, separated by a vertical bar.
copy
The displayed cursor is copy cursor, showing there is a requirement to create a copy of something.
crosshair
The displayed cursor is Crosshair cursor, commonly used to indicate the selection of elements in a bitmap.
default
The default cursor, which varies depending on the platform, is usually displayed as an arrow.
e-resize
The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
ew-size
The displayed cursor is east-west resize cursor, showing cursor for bidirectional resizing.
grab
The displayed cursor is grab cursor, showing that can grab the element and can be dragged to relocate it.
grabbing
The displayed cursor is grabbing cursor, showing something is being held or pulled to facilitate its movement.
help
The displayed cursor is help cursor, showing information for assistance is accessible.
move
The displayed cursor is move-cursor, showing something can be relocated.
n-resize
The displayed cursor is north direction resize cursor, showing north side can be moved or shifted.
ne-resize
The displayed cursor is north-east resize cursor, showing cursor for bidirectional resizing.
nw-resize
The displayed cursor is north-west resize cursor, showing cursor for bidirectional resizing.
ns-resize
The displayed cursor is north-south resize cursor, showing cursor for bidirectional resizing.
nesw-resize
The displayed cursor is north-east south-west resize cursor, showing cursor for bidirectional resizing.
nwse-resize
The displayed cursor is north-west south-east resize cursor, showing cursor for bidirectional resizing.
no-drop
The displayed cursor is no-drop cursor, showing it may not be possible to place the item in its current location.
not-allowed
The displayed cursor is not-allowed cursor, showing the requested action will not be performed.
pointer
The displayed cursor is pointer cursor, showing the cursor serves as an indicator pointing to a hyperlink.
progress
The displayed cursor is progress cursor, showing the program is performing background tasks, allowing the user to maintain interaction with the interface instead of having to wait for its completion.
row-resize
The displayed cursor is row-resize cursor, showing element or line may be subject to vertical resizing, usually represented by arrows pointing both upward and downward, separated by a horizontal bar.
s-resize
The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
se-resize
The displayed cursor is south-east resize cursor, showing cursor for bidirectional resizing.
sw-resize
The displayed cursor is south-west resize cursor, showing cursor for bidirectional resizing.
text
The displayed cursor is text cursor, showing you can select the text that is normally indicated by an I-shaped cursor.
URL
The displayed cursor is an image specified by the comma separated urls, a generic cursor must also be provided at the end of urls in case the image can not be used.
wait
The displayed cursor is cursor, The program is currently occupied, and the user cannot engage with the interface, this state is sometimes represented by an image of an hourglass or a watch.
w-resize
The displayed cursor is west direction resize cursor, showing west side can be moved or shifted.
zoom-in
The displayed cursor is zoom-in, showing an object can be enlarged through zooming.
zoom-out
The displayed cursor is zoom-out, showing an object can be shrunk through zooming.
Examples of CSS Cursor Property
The following examples demostrate the cursor property with different values.
Demonstration of All Cursors
The following example shows the demonstration of a number of mentioned cursors, to observe the effect hover over each block.
CSS padding is used to create extra space between the border of the element and its contents. In this chapter we will learn different types of padding and properties associated with it.
What is CSS Padding?
In CSS, padding is a property that is used to create additional spacing inside the boundary of an element. The default value for padding is zero. A padding value of zero indicates that content (mostly text content) will start from the border of the element itself.
CSS Padding Example
You can try different ways to use to create padding in the below section and you can change the values as well.
padding: 1em
padding: 10px 0
padding: 10px 50px 20px
padding: 10px 50px 20px 40px
padding: 30px
Try Different Padding Options
Define Padding
To define any padding on any HTML element, you can use the CSS padding property. This property is shorthand property of ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’ properties. A single value will generate padding all around the element.
Syntax
padding:"value";
Example
In this example, we have generated 5px padding surrounding the paragraph element and highlighted the padding area with the light-green background.
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: white;
}
</style></head><body><h1>Tutorials point</h1><h3>CSS Padding</h3><div><p style="padding: 5px;">
CSS Padding Applied on Paragraph Element
</p></div></body></html></pre>
CSS Individual Padding Properties
As we have mentioned earlier the padding is a shorthand property for all Individual sides padding. You can set different padding values for the top, right, bottom, and left sides.
padding-top: This property is used to set the top padding of any element.
padding-right: This property is used to set the right padding of any element.
padding-bottom: This property is used to set the bottom padding of any element.
padding-left: This property is used to set the left padding of any element.
You can check the attached image for more clarity on individual side paddings.
Syntax
The syntax for the CSS individual padding properties is as follows:
.bottom {
padding-bottom: 30px;
}
.right {
padding-right: 30px;
}
.left {
padding-left: 15px;
}
</style></head><body><h3>CSS Padding Individual Properties</h3><div><p class="top"><span>CSS Padding Top Applied on Paragraph Element</span></p><hr><p class="right"><span>CSS Padding Right Applied on Paragraph Element</span></p><hr><p class="bottom"><span>CSS Padding Bottom Applied on Paragraph Element</span></p><hr><p class="left"><span>CSS Padding Left Applied on Paragraph Element</span></p></div></body></html></pre>
All the leftover space on the right side of the element can be confusing to identify the padding, if you try on your own by changing values it will clear the padding concept. Always remember negative values are not allowed for padding in CSS.
CSS Padding Shorthand Property
There are four ways to provide value to the CSS padding property all of them are mentioned and described below with the complete example code.
Single Values: Here you can provide a single value to the padding property that same value will be applicable on four sides of the the element.
Two Values: For two values, the first value(10px) represents the top and bottom padding while the second value(20px) represents the left and right padding. For example - padding: 10px 20px;
Three Values: For three values, the first value(10px) represents the top padding, the second value(15px) represents the left and right padding, and the third value(20px) represents the bottom padding. For example - padding: 10px 15px 20px;
Four Values: For four values, the first value(5px) represents the top padding, the second value(10px) represents the right padding, the third value(15px) represents the bottom padding, and the fourth value(20px) represents the left padding. For example - padding: 5px 10px 15px 20px;
Syntax
The syntax for the padding with single, double, triple, and four values is as follows:
padding:"value" // Single Value
padding:"value value" // Two Values
padding:"value value value" // Three Values
padding:"value value value value" // Four Values
Example
In this example, we have set the padding property of paragraph element with single, double, triple and four values.
</style></head><body><h2>CSS padding Property with Single to Four Values</h2><div><p class="single"><span>Padding property with Single Value.</span></p><hr/><p class="double"><span>Padding property with two Values</span></p><hr/><p class="triple"><span>Padding property with three Values</span></p><hr/><p class="four"><span>Padding property with four Values</span></p></div></body></html></pre>
Padding Mix up Units
CSS does not restrict the usage of multiple units for specifying the padding value while specifying the shorthand property. That means the length value can be passed as pixels along with ems or inches, etc.
Syntax
The syntax of padding property value with mix-up units is as follows:
h2{padding: 20px 4ex .5in 3em;}
Example
In this example, we used different units to specify the padding value.
<!DOCTYPE html><html><head><style>
h2 {
padding: 20px 4ex .5in 3em;
background-color: silver;
}
</style></head><body><div><h2>
The different length units are passed
as padding values to the h2 element.
</h2></div></body></html></pre>
Using padding With Percentage Value
The padding property can be used with a percentage value. The percentages are calculated in relation to the width of the parent element's content area.
Example
In this example, we have used a percent value with a padding property to set the padding of the paragraph element.
<!DOCTYPE html><html><head><style>
div {
width: 300px;
}
p {
padding: 10%;
background-color: silver;
}
</style></head><body><div><p>
The padding defined for p element is
10%, which is calculated as 10% of
width of parent element, which means
it is 10% of 300px and that is 30px.
</p></div></body></html></pre>
Padding Properties Reference
You can explore more examples of padding properties by visiting the sub-topics listed in the following table:
Property
Description
Example
padding
A shorthand property that is used for setting all the padding properties in one declaration.
Lists are useful as they present the information in a structured and organized manner. Lists improve the readability and comprehension of content on a web page. So, if the content is listed, it is easy to follow.
Lists are commonly used to display items, steps, options, or any other type of related information that should be presented sequentially or in a group.
This chapter will discuss how to control list type, position, style, etc., using CSS. Before that let us understand what are the type of lists in HTML.
Table of Contents
Types of Lists
List Style Type Property
List Style Image Property
List Style Position Property
List Style Shorthand Property
Styling Definition List
Styling Unordered List
List Style Type Reference
Types of Lists
Following are types of lists used HTML.
Ordered List (<ol>): Used when the items need to be presented in a specific order. Commonly used for procedures, steps, instructions, or any sequence of information where the order matters.
Unordered List (<ul>): Used when the order of items doesn’t matter, and you want to present items as a group. Commonly used for lists of features, benefits, options, or any non-sequential information.
Definition List (<dl>): Used for terms and their corresponding definitions.
List Style Type Property
The CSS list-style-type property is used to change the marker (such as a bullet or number) style for list items in ordered (<ol>) or unordered (<ul>) lists.
Following example shows some types of list styles.
Example
<!DOCTYPE html><html lang="en"><head><style>
/* Unordered List Styles */
ul.circle {
list-style-type: circle; /* Circle bullets */
}
The list-style-image property can be used to to specify an image/icon as an item list marker.
You can use your own bullet style. If no image is found, then default bullets are returned.
Example
<!DOCTYPE html><html><head><style>
ul {
list-style-image: url('/css/images/smiley.png');
}
ol{
list-style-type: upper-roman;
list-style-image: url('/css/images/smiley');
}
</style></head><body><ul><li> This is unordered list </li><li> We made custom marker for this </li></ul><ol><li> Incorrect URL given for ol style </li><li> No custom image will be used.</li><li> Specified style type will be used. </li></ol></body></html></pre>
It is advisable to provide an alternative for an image as list marker, so that in case of image not getting loaded or gets corrupted, the user is having a fallback option.
List Style Position Property
The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one of the following values.
list-style-position: inside If the text goes onto a second line, the text will wrap underneath the marker. It will also have proper indentation.
list-style-position: outside If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).
list-style-position: inherit Inherits the property of the parent list in the case of nested lists.
Example
<!DOCTYPE html><html><head><style>
body{
padding: 10px;
}
ul {
padding: 0;
border-left: solid 2px;
}
</style></head><body><ul style = "list-style-position:outside;"><li>
The list style position property is outside. In this
case when text overflows to the next line, the marker
will lay outside the text area of list.
</li><li> Check out yourselves. </li></ul><ul style = "list-style-position:inside;"><li>
The list style position property is inside. In this
case when text overflows to the next line, the marker
will lay inside the text area of list.
</li><li> Check out yourselves. </li></ul></body></html></pre>
List Style Shorthand Property
The list-style property allows you to specify all the three list properties in a single declaration.
ul{list-style:url() | Marker Type | Marker Position;}
You can follow any order of the values for the list-style property. If any of the value(s) is missing, it will be filled by the default value for the same. But there has to be minimum one value passed.
.styled-dl dt:hover,
.styled-dl dd:hover {
background-color: #bbdefb;
}
</style></head><body><div class="container"><div class="dl"><h2>Definition List</h2><dl class="styled-dl"><dt>HTML</dt><dd>
A standard markup language for creating web
pages.
</dd><dt>CSS</dt><dd>
A style sheet language used for describing the
presentation of a document.
</dd><dt>JavaScript</dt><dd>
A programming language that enables interactive
web pages.
</dd></dl></div></div></body></html></pre>
List Style Type Reference
Following table lists possible values that can be used for property list-style-type:
CSS margins are used to create space around the outer part of an element. In this tutorial, we will learn how to add different types of margins to HTML elements and the properties associated with it.
What is CSS Margin?
A Margin in CSS makes the layout visually appealing by adding extra space between elements.
You can set the margin for individual sides using properties margin-bottom, margin-top, margin-left and margin-right.
Negative Margin: A margin with a negative value indicates the elements overlap with each other.
CSS Margins Example
You can try different ways to use to create margins in the below section and you can change the values as well.
margin: 1em
margin: 10px 0
margin: 10px 50px 20px
margin: 10px 50px 20px 40px
margin: 30px
Try Different Margin Options
Define Margin
To define any margin on any HTML element you can use the CSS margin property. This property is a shorthand property of the ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’ properties. A single value will generate a margin all around the element.
Syntax
margin:"value";
Example
As you can see in this below example we have made a 10px and 20px margin surrounding the paragraph element and highlighted the margin area with light-green background.
As we have mentioned earlier the margin is a shorthand property for all Individual sides margin. You can set different margin values for the top, right, bottom and, left sides.
margin-top: This property is used to set the top margin of any element.
margin-right: This property is used to set the right margin of any element.
margin-bottom: This property is used to set the bottom margin of any element.
margin-left: This property is used to set the left margin of any element.
You can check the attached image for more clarity on individual side margins.
Syntax
The syntax for the CSS individual margin properties is as follows:
In this example, we have created four different elements and generated a margin on each element's individual sides with the above-mentioned properties.
.bottom {
margin-bottom: 30px;
}
.right {
margin-right: 30px;
}
.left {
margin-left: 15px;
}
</style></head><body><h3>CSS Margin Individual Properties</h3><div><p class="top"><span>CSS Margin Top Applied on Paragraph Element</span></p><hr><p class="right"><span>CSS Margin Right Applied on Paragraph Element</span></p><hr><p class="bottom"><span>CSS Margin Bottom Applied on Paragraph Element</span></p><hr><p class="left"><span>CSS Margin Left Applied on Paragraph Element</span></p></div></body></html></pre>
CSS Margin Shorthand Property
There are four ways to provide value to the CSS margin property all of them are mentioned and described below with the complete example code.
Single Value: Here you can provide a single value to the margin property that same value will be applicable on four sides of the the element.
Two Values: For two values, the first value(10px) represents the top and bottom margin while the second value(20px) represents the left and right margin. For example − margin: 10px 20px;
Three Values: For three values, the first value(10px) represents the top margin, the second value(15px) represents the left and right margin, and the third value(20px) represents the bottom margin. For example − margin: 10px 15px 20px;
Four Values: For four values, the first value(5px) represents the top margin, the second value(10px) represents the right margin, the third value(15px) represents the bottom margin, and the fourth value(20px) represents the left margin. For example − margin: 5px 10px 15px 20px;
Syntax
The syntax for the margin with single, double, triple, and four values is as follows:
margin:"value" // Single Value
margin:"value value" // Two Values
margin:"value value value" // Three Values
margin:"value value value value" // Four Values
Example
In this example, we have set the margin property of paragraph element with single, double, triple and four values.
</style></head><body><h2>CSS margin Property with Single to Four Values</h2><div><p class="single"><span>Margin property with Single Value.</span></p><hr/><p class="double"><span>Margin property with two Values</span></p><hr/><p class="triple"><span>Margin property with three Values</span></p><hr/><p class="four"><span>Margin property with four Values</span></p></div></body></html></pre>
Margin Mix up Units
CSS does not restrict the usage of multiple units for specifying the margin value while specifying the shorthand property. That means the length value can be passed as pixels along with ems or inches, etc.
Syntax
The syntax of margin property value with mix-up units is as follows:
h2{margin: 20px 4ex .5in 3em;}
Example
In this example, we used different units to specify the margin value.
<!DOCTYPE html><html><head><style>
div{
border: 2px solid;
}
h2 {
margin: 20px 4ex .5in 3em;
background-color: silver;
}
</style></head><body><div><h2>
The different length units are passed
as margin values to the h2 element.
</h2></div></body></html></pre>
Using margin With Percentage Value
The margin property can be used with a percentage value. The percentages are calculated in relation to the width of the parent element's content area.
Example
In this example, we have used a percent value with margin property to set the margin of the paragraph element.
<!DOCTYPE html><html><head><style>
div {
width: 300px;
border: 2px solid;
}
p {
margin: 10%;
background-color: silver;
}
</style></head><body><div><p>
The margin defined for p element is
10%which is calculated as 10% of width
of parent element(div), which means
it is 10% of 300px and that is 30px.
</p></div></body></html></pre>
Centering Elements with CSS Margin
To center an element using CSS margin property, we use auto value with margin property.
Example
In this example, we have centered a div element using margin:auto value.
<!DOCTYPE html><html><head><style>
div {
width: 200px;
margin: auto;
background-color: lightgray;
}
</style></head><body><h2>CSS margin:auto Property</h2><div>
A div element centered using margin: auto;
</div></body></html></pre>
Margin Properties Reference
You can explore more examples of margin properties by visiting the sub-topics listed in the following table:
Property
Description
Example
margin
A shorthand property that is used for setting all the margin properties in one declaration.
CSS border-inline is a shorthand property that sets the values for different logical inline border attributes, border-inline-width, border-inline-style and border-inline-color in one single declaration. The border-style is required. Default values of color and width will be used if not specified. The property is affected by writing mode, text-orientation and direction.
It specifies the width of element borders in inline direction. Default value is medium.
border-inline-style
It specifies the style of element borders in inline direction. Default value is none.
border-inline-color
It specifies the color of element borders in inline direction. Default value is color of the text.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Border Inline Property
The following examples explain the border-inline porperty with different values.
Defining All Values of Border Inline Property
To define the values of border-inline-width, border-inline-style and border-inline-color in one single declaration, we use the border-inline property.The following example shows how this is done.
This has border-inline property with
4px width solid style and red color
</p><p class="borders border2">
This has border-inline property with
6px width dashed style and blue color
</p><p class="borders border3">
This has border-inline property with
8px width dotted style and yellow color
</p><p class="borders border4 ">
This has border-inline property with
8px width double style and brown color
</p></div></body></html></pre>
Constituent Properties of Border Inline Property
The border-inline property is composed of properties border-inline-width, border-inline-style and border-inline-color. The following example shows how these individual properties combine to show the border-inline effect.
This has border-inline-width:4px,
border-inline-style:solid,
border-inline-color:red
</p><p class="borders border2">
This has border-inline-width:6px,
border-inline-style:dashed,
border-inline-color:blue
</p></div></body></html>
Border Inline Property with Writing Mode
The border-inline property is affected by the writing mode which decides the direction of the inline borders. In vertical writing mode, it affects the top and bottom borders while in horizontal writing mode, it affects the left and right borders. These are shown in the following example.
CSS border-block property is a shorthand property for assigning values to border-block-color, border-block-style and border-block-width in one go. The border-block-style is required parameter. If other parameters are not mentioned then default values will be used. This property depends on the direction of the block which is determined by the writing mode.
It specifies the width of the border in the block direction. Default is medium.
border-block-style
It specifies the style of the border in the block direction. Default is none.
border-block-color
It specifies the color of the border in the block direction. Default is text’s color.
initial
This sets the property to its default value.
inherit
This inherits the property from the parent element.
Examples of CSS Border Block Property
The following examples explain the border-block property with different values.
Setting the Width of Border
To set the width of the border, we use the border-block-width component of the border-block property. In the following example, we have used ‘thick’ and 10px width for border-block-width property.
#width2 {
padding: 30px;
border-block-style: solid;
border-block-width: 10px;
}
</style></head><body><h2>CSS border-block property</h2><p id="width1">
This first example shows the width property
of the border-block with thick value.
</p><p id="width2">
This second example shows the width property
of the border-block with 10px value.
</p></body></html></pre>
Setting the Style of Border
To set the style of the border, we use the border-block-style component of the border-block property. In the following example, we have used 'solid' and 'dashed' styles for border-block-style property.
#style2 {
padding: 30px;
border-block-style: dashed;
}
</style></head><body><h2>CSS border-block property</h2><p id="style1">
This first example shows the style property
of the border-block with solid value.
</p><p id="style2">
This second example shows the style property
of the border-block with dashed value.
</p></body></html></pre>
Setting the Color of Border
To set the color of the border, we use the border-block-color component of the border-block property. In the following example, we have used 'red' and 'blue' colors for border-block-color property.
#color2 {
padding: 30px;
border-block-style: solid;
border-block-color:blue;
}
</style></head><body><h2>CSS border-block property</h2><p id="color1">
This first example shows the color property
of the border-block with red value.
</p><p id="color2">
This second example shows the color property
of the border-block with blue value.
</p></body></html></pre>
Setting all Values at Once
To set the values of width, style and color at once, we can simply use the border-block property by providing all the values at once. In the following example, the width has been taken as 5px, style as dashed and color as green.
</style></head><body><h2>CSS border-block property</h2><p id="block">
This example shows the border-block property
defining all values at once.
</p></body></html></pre>
Setting Border Block with Writing Mode
The writing-mode in the context of border-block influences the direction of the border. By default, the border appears horizontally, however by changing the writing mode, the border's direction can be changed
The border property creates a border around an HTML element, such as a div, image, or text. You can customize the border by changing the border style, width, radius, and color for each side of the element. Borders help in improving the readability of the content as it provide separation of content and is also useful for highlighting important sections of the web page.
CSS Borders Example
You can try different ways to set the border in the below section and you can change the values as well.
CSS Border Interactive Example
Interactive example for CSS BordersBorder Width: pxBorder Radius: pxBorder Style: Solid Dashed Dotted Double Groove Ridge Inset Outset Border Color:
CSS Border Shorthand Property
You can use the shorthand CSS border property to specify the border width, style, and color.
Syntax
The syntax for the border shorthand property is as follows:
In this example, we have used the CSS border property to set the border of a div and paragraph element.
<html><head><style>
p {
border: solid 4px grey;
padding: 10px;
}
div{
border: darkred solid 5px;
padding: 10px;
}
</style></head><body><p> Check the borders of paragraph !!!</p><div> Check the borders of div !!!</div></body></html></pre>
Types of Border Properties
In CSS, we can style the following border properties:
border-style: It specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
border-width: It specifies the width of a border.
border-color: It specifies the color of a border.
CSS border-style Property
To specify the type of border style for an element, the border-style property is used. You can specify border style as solid, dashed, or dotted. Check out the output of the following example for all the types of border styles.
Example
In this example, we have used the border-style property to set the different border styles for each paragraph element.
You can specify different border styles for each side of the element. To set the border-style property for the individual sides of the element, we use the following CSS properties:
border-top-style: It sets the style of an element's top border.
border-bottom-style: It sets the style of an element's bottom border.
border-left-style: It sets the style of an element's left border.
border-right-style: It sets the style of an element's right border.
Example
In this example, we have used the CSS border-style property for individual sides to set the different border styles for each side of a paragraph element.
<html><head><style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
padding: 2em;
}
</style></head><body><h2>Border Style Individual Side</h2><p>Different border styles on all sides.</p></body><html></pre>
CSS border-width Property
The border-width is used to specify the thickness of a border around an element. It can have values like thin, medium, thick, or any length (in px, or em ). Let us look at an example of this.
Example
In this example, we have used the CSS border-width property to set the different border widths for each paragraph element.
Declare border-style property before declaring border-width property, else the border effect will not be seen.
Border Width For Individual Sides
You can specify different border widths for each side of an element. To set the border-width property for individual sides, use the following CSS properties:
border-top-width: Sets the width of the top border.
border-bottom-width: Sets the width of the bottom border.
border-left-width: Sets the width of the left border.
border-right-width: Sets the width of the right border.
Example
In this example, we have used the CSS border-width property for individual sides to set different border widths for each side of a paragraph element.
<html><head><style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: thick;
border-bottom-width: medium;
border-left-width: 10px;
padding: 2em;
}
</style></head><body><h2>Border Width Individual Sides</h2><p>Different border widths on all sides.</p></body></html></pre>
CSS border-color Property
The border-color is used to set the color of the border. If no color is specified for the border, the default value is currentColor i.e. the foreground color.
Example
In this example, we have used the CSS border-color property to set the border colors of paragraph elements using the color name and hex value.
Declare border-style property before declaring border-color property, else the border effect will not be seen.
Border Color For Individual Sides
You can specify different border colors for each side of an element. To set the border-color property for individual sides, use the following CSS properties:
border-top-color: Sets the color of the top border.
border-bottom-color: Sets the color of the bottom border.
border-left-color: Sets the color of the left border.
border-right-color: Sets the color of the right border.
Example
In this example, we have used the CSS border-color property for individual sides to set different border colors for each side of a paragraph element.
<html><head><style>
p {
border: solid 7px;
border-top-color: red;
border-right-color: #0000ff;
border-bottom-color: rgb(100,123,111);
border-left-color: rgba(50,123,111,0.4);
padding: 10px;
}
</style></head><body><h2>Border Color Individual Sides</h2><p>Different border colors on all sides.</p></body></html></pre>
Borders Individual Side Shorthand Property
To apply all the border properties, such as style, width, and color, to just one side of an element, we can make use of the shorthand border property for individual sides. The individual side border shorthand properties are as follows:
border-top property: It is a shorthand property for setting the top border properties.
border-bottom property: It is a shorthand property for setting the bottom border properties.
border-left property: It is a shorthand property for setting the left border properties.
border-right property: It is a shorthand property for setting the right border properties.
Syntax
The syntax for the individual side border shorthand properties is as follows:
The above code will have a 5px thick, solid, and gray border on all the sides except for the bottom where the width will be 15px.
Example
Here is an example of overriding the border shorthand property:
<html><head><style>
div {
padding: 10px;
border: 5px solid gray;
border-bottom-width: 15px;
}
</style></head><body><div> Check the borders!!! </div></body></html></pre>
Applying Borders to Inline Elements
Borders can be given to any inline element in a similar manner. The border's thickness will not have any effect on the line height of the element. If left and right borders are specified in an inline element, it will displace the text around the border. Here is an example of applying a border to an inline element.
Example
In this example, we have used the border property on span (inline element).
<html><head><style>
span {
border: 5px solid black;
background-color: silver;
}
</style></head><body><p>
Check the <span>inline elements</span> with
borders and rest has no border.
</p></body></html></pre>
CSS border-image Property
To set images as borders for another element like div, span, body, paragraph, etc, you can use the border-image property. First you need to declare the border-style property before providing an image source, else no image will be displayed as the border.
Example
Here is an example of using the border-image property to set an image as the border of
<html><head><style>
div{
background-color: #f0f0f0;
border: 20px solid transparent;
border-image: url(/css/images/border.png) 40;
padding: 20px;
}
</style></head><body><div><p>
This is an example of setting a
border image using CSS
</p></div></body></html></pre>
CSS border-radius Property
CSS border-radius property is used to specify the roundness of border edges. The value for this property can be in length (px, em) or percentages. A border radius of 50% indicates a complete circle.
Example
In this example, we have created a rounded square and a circle using the border-radius property.
Styling tables in a webpage involves using CSS properties to customize the appearance of tables. CSS properties such as border-collapse, border-spacing, and caption-side can be applied to tables to control the borders, spacing, and alignment of the table and its cells.
This chapter discusses how to set different properties of an HTML table using CSS.
CSS Table Border Styling
To style table borders, we use CSS properties like border and border-radius. You can set the border’s width, color, and style with border property on the table, rows, or individual cells.
border: CSS border property sets the width, style, and color of all four sides of the table border (e.g., border: 1px solid black;).
border-radius: CSS border-radius property rounds the corners of the table border (e.g., border-radius: 5px|50%).
Example
In this example, we have set the rounded table border using CSS border and border-radius property.
<!DOCTYPE html><html><head><style>
table {
border-radius: 10px;
border: 2px solid #031926;
width: 100%;
}
td {
border: 1px solid black;
height: 50px;
vertical-align: middle;
text-align: center;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
CSS Table Border Collapse
To merge the cell borders of the table or keep the cell borders separated, the border-collapse property is used. To merge the cell borders, collapse value is used while separate value keeps the border distinct.
Example
In the following example, we have used border-collapse property with collapse and separate values.
<!DOCTYPE html><html><head><style>
table {
border: 3px solid purple;
}
th, td {
border: 1px solid black;
padding: 6px;
}
</style></head><body><h2> border-collapse: separate </h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table><h2> border-collapse: collapse </h2><table style="border-collapse: collapse;"><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
CSS Table Border Spacing
To set the distance separating adjacent cell borders in a table, the border-spacing property is used. This property may be specified as either one or two values.
border-spacing: 2px: It applies 2px spacing to both vertical and horizontal borders.
border-spacing: 1cm 2em: In this case, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
Example
In this example, we have set the border-spacing property to 1em horizontally and 0.5em vertically.
<!DOCTYPE html><html><head><style>
table {
border-collapse: separate;
border-spacing: 1em 0.5em;
border: 3px solid;
}
td {
width: 1.5em;
height: 1.5em;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
Note: The border-spacing property only works when border-collapse is set to separate. If you set border-collapse to collapse, the border-spacing property will have no effect, and the borders will collapse into a single line.
CSS Tables Caption Side
To control the placement of the table caption, the caption-side property is used.
Example
In this example, we have used the caption-side property to place the table caption at the top and bottom of the table in the first and second table respectively.
<!DOCTYPE html><html><head><style>
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</style></head><body><table class="top"><caption>
Caption ABOVE the table
</caption><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table><br /><table class="bottom"><caption>
Caption BELOW the table
</caption><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
CSS Tables Empty Cells
To render the empty cells of the table, the empty-cells property is used. The empty-cell property is applied only to tables and table cells. It has the following two values:
show: It is the default value that indicates that empty cells should be shown with borders and spacing as if they contained content.
hide: It indicates that empty cells should be hidden and not take up any space. Borders and spacing for empty cells will not be displayed.
Example
In this example, we have used the empty-cells property with show and hide value to show and hide the empty cells respectively.
<!DOCTYPE html><html><head><style>
table {
width: 350px;
border-collapse: separate;
empty-cells: show;
}
td,th {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #999999;
}
</style></head><body><h2> Empty Cells: Show </h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td></td></tr></table><h2> Empty Cells: Hide </h2><table style="empty-cells: hide;"><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td></td></tr></table></body></html></pre>
CSS Table Layout
CSS table-layout property is used to control how a browser should render a table. It defines the algorithm used to lay out table cells, rows, and columns. It has the following property values:
auto: It is the default value where the browser calculates the width of columns and cells based on the content.
fixed: It sets a fixed column width based on the specified table or column width. If width isn't specified, then the first row is used to determine column width and the rest of the rows follow the same column widths irrespective of the content.
Example
In this example, the table-layout property is used with auto and fixed values.
<!DOCTYPE html><html><head><style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style></head><body><h2>Table with fixed layout</h2><table style="table-layout: fixed; "><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr></table><h2>Table with auto layout</h2><table style="table-layout: auto; "><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>This is some longer content in Column 1</td><td>Short content</td><td>Even longer content that might wrap in Column 3</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr></table></body></html></pre>
Note: The fixed table layout is faster than auto, as the fixed value does not depend on the table's content but rather on the table's width.
CSS Table Contents Alignment
To align the content of table cells, CSS properties such as text-align and vertical-align properties are used.
text-align: It sets the horizontal alignment of the text content within table cells. It can have values like left, right, center, and justify.
CSS vertical-align: It sets the vertical alignment of the content within table cells. It can have values like top, bottom, and middle.
Example
In this example, we have used the text-align and vertical-align properties to align the text content horizontally and vertically.
<!DOCTYPE html><html><head><style>
table, td, th {
border: 2px solid black;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 70px;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td style="text-align: center;">Data Center</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td style="vertical-align: bottom">Data Bottom</td><td> Data 4</td></tr><tr><td> Data 1</td><td style="vertical-align: top">Data Top</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
Note: The default horizontal alignment of <th> and <td> is center and left respectively. The default vertical alignment of both <th> and <td> is middle.
CSS Tables Background color
To set the background color of the cell, row, or entire table, the CSS background-color property is used.
Syntax
The syntax for setting the background color of the cell, row, and table is as follows:
/* To set the background color of table */table{background-color: #f2f2f2;}/* To set the background color of a cell a row */td{background-color: #f2f2f2;}/* To set the background color of a row */tr{background-color: #ffffff;}
Example
In this example, we have set the background color of the table using the element selector. To set the background color of the row and a cell, we have used inline CSS.
<!DOCTYPE html><html><head><style>
table {
border: 2px solid black;
background-color: rgb(237, 181, 237);
width: 100%;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: middle;
text-align: center;
}
</style></head><body><h2>Background color property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td style="background-color: #f0f0ff;"> Data 2</td><td>Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr style="background-color: #04af2f;"><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
CSS Table Text Font Styles
To style the text content of the table, we can use CSS font properties such as font-size, font-family, font-weight, etc. on the table elements.
Example
In this example, we have set the font-size and font-family of the th and td tags.
Dividers in a table are used to separate the content of the table and make it more readable. To set a vertical divider, the border-right property is used whereas border-bottom property is used to set a horizontal divider.
Example
In this example, we have set the vertical divider using the border-right property and the horizontal divider using the border-bottom property.
.vDiv {
border-right: 2px solid black;
}
</style></head><body><h2>Horizontal Divider</h2><table><tr><th class="vDiv">Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td class="vDiv"> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td class="vDiv"> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td class="vDiv"> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
CSS Striped Table
A striped table is a table that has alternating background colors for rows, making it easier to read and understand the data. To create a striped table, the nth-child selector is used to apply different background colors to odd and even rows.
Example
In this example, we have used the nth-child selector to set the green and light green background color of the cells creating a striped table.
tr:nth-child(odd) {
background-color: rgba(4, 175, 47, 1);
}
tr:nth-child(even) {
background-color: rgba(4, 175, 47, 0.4);
}
</style></head><body><h2>Striped table</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
CSS Responsive Table
A responsive table refers to a table that adjusts and adapts its layout and formatting based on different screen sizes and resolutions. You can use the overflow-x property to add a horizontal scroll bar to the table in small screen sizes when the entire screen is not seen.
Example
In this example, we have used overflow-x property to add a horizontal scroll to adjust to smaller screens.
