If you are planning to start your career as a full-stack web developer, then this blog is perfect for you! Here, we will move ahead from the basics of CSS and discuss CSS borders, backgrounds, units, margins, padding, and the box model with the simplest examples. Besides this, you will also learn how to style the edges of the elements, control background images, and use different units more smartly. All this combined makes your web layouts more visually strong and responsive.
By the end of this blog, you will get a clear picture of planning a layout by using proper spacing and structure.
CSS Border Properties Explained with Examples
What is border-style in CSS?
Border-style property is used in CSS to set a design for the border of an element. Moreover, it is up to you whether you want your border to be sold, dotted, dashed, double, or any other style, like this:
border-style: solid;
With this, a simple solid border is inserted at all 4 sides of the element.
Border Properties
- Border-style– Defines the border type.
border-style: solid; /* Other values: dashed, dotted, double, groove, ridge, inset, outset, none */ - border-width– Sets the thickness of the border.
border-width: 5px; - border-color– Changes the border color.
border-color: red; - Shorthand Border Property
border: 3px solid blue; /* width, style, color */ - Rounded Borders
border-radius– Creates rounded corners.
border-radius: 10px;
- Fully rounded shape (circle/oval)
border-radius: 50%;
Also Read: Ultimate Guide to CSS: Importance, Types, and How to Learn CSS
How to use border-width effectively?
In CSS, the border-width property is used to control the thickness of the border of an element. Fixed units like px, em, and rem can be used in this process. Moreover, if you want the borders of all the sides to be the same, you can simply write:
border-width: 2px;
However, if you plan to set the width of each side differently, you can write this:
border-width: 2px 4px 6px 8px;
This means
- Top border: 2px
- Right border: 4px
- Bottom border: 6px
- Left border: 8px
Without border style, you won’t be able to see the border width, so it is important to set border style too.
Also Read: Learn Full-Stack-Web Development: No Experience Needed!
Changing the border-color in CSS
Border-color property is used in CSS to change the border color of an element. You can specify colors using basic color names like ‘red’ or ‘blue’, HEX codes such as ‘#ff0000’, or RGB values like ‘rgb(255, 0, 0)’.
Example:
border: 2px solid;
border-color: green;
If you want, you can keep different colors for each side:
border-color: red blue green yellow;
This means: top border red, right blue, bottom green, left yellow.
CSS Border Shorthand Property
The CSS border shorthand property helps define all the border parts in one line, like border-width, border-style, and border-color.
Example: border: 2px solid black;
This states that the border will be 2px wide with a solid style and black color. You must have noticed that you don’t have to write 3 different properties, saving a lot of time and space.
Also Read: Is Full Stack Developer a Good Career?
How to Make Rounded Corners with border-radius?
We use border radius to make the edges of an image, box, or button smoother and more stylish, giving the design a more modern and clean look. Here is the basic syntax:
selector {
border-radius: value;
}
You can use both px and % :
px = Roundness based on pixels
% = Roundness based on percentage
Opacity (Transparency in CSS)
The opacity property controls the transparency of an element. Opacity: 0 means completely invisible, and Opacity: 1 means fully visible. With it, you can show a text, image, or a box with little visibility to make it appear more stylish.
Example:
selector {
opacity: value;
}
div {
opacity: 0.5;
}
You must be able to understand, with this example, that the div element will be 50% visible, neither will it appear completely, nor will it hide.
Also Read: How to Become a React JS Developer?
CSS Backgrounds
CSS background is used to add color, image, or patterns to the background of any element. Moreover, you can also customize your designs with background color, image, position, repeat, size, and attachment options. This step helps your website look more stylish and attractive. Now let’s move ahead and break down the background properties:
Background Properties
Here is the list of CSS background properties that you should be aware of:
background-color– Sets the background color.
background-color: lightgray;
background-image – Adds an image as a background.
background-image: url(‘image.jpg’);
background-repeat – Controls image repetition.
background-repeat: no-repeat; /* Other values: repeat, repeat-x, repeat-y */
background-position – Positions the background image.
background-position: center top; /* (x-axis y-axis) */
background-attachment – Defines if the background scrolls with content.
background-attachment: fixed; /* Other values: scroll, local */
background-size – Specifies the size of the background image.
background-size: cover; /* Other values: contain, auto, specific size (px, %, em) */
- Cover – Scales the image to fill the container while maintaining aspect ratio.
- Contain – Resizes the image to fit within the container without cropping.
- Auto – Uses the image’s original size.
- Custom values (100px 200px or 50% 50%) allow exact control.
Shorthand Background Property
With the shorthand background property, you can set background color, image, position, repeat, size, and attachment, all in one line. You can consider it a shortcut to write CSS, which makes the code short and clean.
Example:
div {
background: url(“bg.jpg”) no-repeat center/cover fixed #f0f0f0;
}
Here is a breakdown of this example:
url(“bg.jpg”) – background image
no-repeat – image repeat nahi hoga
center/cover – center position + cover size
fixed – background scroll nahi karega
#f0f0f0 – background color
CSS Units: Absolute vs Relative Units
CSS units help define the size, margin, and position of an element. Mainly, there are two types of units, one is absolute and the other is relative. Now let’s deep dive into understanding CSS units in a more precise way, along with their two types, absolute and relative.
Absolute Units: (Fixed sizes)
- px (Pixels) –They are commonly used, and do not scale with screen size.
Relative Units: (Scales with viewport or parent element)
- % – Relative to the parent element.
- em – Relative to the size of the parent font.
- rem – It’s relative to the font size of the root () element.
- vw (Viewport Width) – Relative to the viewport width.
- vh (Viewport Height) – Relative to the viewport height.
CSS Height and Width
- Width and height specify an element’s size.
- Values can be in px, %, em, rem, vw, vh, etc.
- Default behavior: Block elements take full width, inline elements take only the required width.
Min and Max Dimensions
Min-Width & Min-Height:
- Ensures an element does not get smaller than a specified value.
Max-Width & Max-Height
- Prevents the element from exceeding a maximum size.
Margin & Padding
a) Margin (Space Outside an Element)
- margin: 20px; (applies to all sides)
- margin: 10px 20px; (top-bottom | left-right)
- margin: 10px 15px 20px; (top | left-right | bottom)
- margin: 5px 10px 15px 20px; (top | right | bottom | left)
- margin: auto; (centers the element horizontally)
b) Padding (Space Inside an Element)
Works the same as margin but adds space inside the element. Padding defines the space between the content and its border. You can apply padding everywhere by writing shorthands like padding: 10px. Or you can also give separate values to specific sides like top, right, bottom, and left. This will ensure that the element content appears a bit farther from the content border, making it cleaner to look at.
CSS Box Model
To explain it in one line, the CSS box model defines how an element’s size is calculated. To elaborate, it can be said that it is a concept in which every element is treated like a box that has content, padding, border, and margin. By using this model, you can easily control the size and positioning of an element.
Box Model Structure
- Content – The text or image inside the element.
- Padding – Space between content and border.
- Border – Outline surrounding padding.
- Margin – Space outside the border.
Final Size Calculation
- Width = Content width + Left Padding +Right Padding + Left Border + Right Border
- Height = Content height + Top Padding +Bottom Padding + Top Border + Bottom Border
Box-Sizing: Border-Box
box-sizing: border-box means that when you set the width or height of an element, then padding and border get included in it (width/height) as well. It helps in predicting the actual size of an element and eases the process of managing layouts.
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
background-color: lightblue;
}
It means:
width: 200px and height: 100px will include the padding and border within the element’s total size.
If box-sizing: content-box; was used, the width and height would increase by the padding and border size.
Also Read: Ultimate Guide to Courses for Website Development for Every Skill Level
Final Words
Thanks for reading it out till here, and we hope you all have gotten a good clarification on CSS layouts with borders, units, and spacing. Becoming a web developer is not a work of science, however, certain concepts should be clear to create a well-responsive and eye-appealing website. This write-up discusses some of those concepts that will help you become a fine professional in the web development realm. Also, if you are keen to enter this industry with a good package, you can check out our full-stack web development course on YouTube.
Frequently Asked Questions
Ans. Padding is the space between the content and its border. Margin is a space outside elements that separates elements from each other. Padding pushes the content from insid, and margin does some with elements from outside.
Ans. You can use margin: auto with a fixed width to center a div, or use flexbox to put justify-content: center; and align-items: center; at the parent. Lastly, you can consider positioning to center a div through position: absolute, and transform.
Ans.% (percent)sets the size based on the parent element, em/remsets based on the size of text or root, and vw / vhrepresents the width of the screen or the percentage of the height, which makes it best for responsive designs.
Ans. First of all, you need to ensure that the width and the height are the same, like 100px by 100px. Then you have to insert border-radius: 50% in CSS, which will make it a circle shape. Also note, if you are adding an image, then always consider object-fit: cover so that the image fits perfectly in the circle.
Ans. By using box-sizing: border-box, the size of an element is counted along with the padding and border. That means if the width is 200px, then padding and border are included with it without taking any extra space. This helps in easy layout creation, and the elements fit into the design.
About The Author
