Advanced Styling — Interview Questions & Answers

Ques: What are Rounded Corners in CSS?

Ans: Rounded corners are created using the border-radius property. It defines how much the corner of a box should be rounded.

Example:

button {
  border-radius: 10px;
}

You can also create circles by setting:

border-radius: 50%;

Ques: What is border-image in CSS?

Ans: border-image allows you to use an image as a border around an element.

Example:

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

Ques: What are CSS Shadows?

Ans: You can add depth and focus using shadows.

Box Shadow

box-shadow: 4px 4px 10px rgba(0,0,0,0.3);

Text Shadow

text-shadow: 2px 2px 5px gray;

Drop Shadow (for images/SVG)

filter: drop-shadow(5px 5px 5px black);

Ques: What are CSS Filters?

Ans: Filters allow you to apply visual effects (like blur or grayscale) to images or elements.

• blur(), brightness(), contrast(), saturate(), sepia(), invert()

Example:

img {
  filter: grayscale(100%) blur(2px);
}

Ques: How do you create Circular Images in CSS?

img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

Ques: What are CSS Clip Paths and Masking?

Ans: They define which parts of an element are visible or hidden.

Clip Path Example:

img {
  clip-path: circle(50%);
}

Masking Example:

div {
  -webkit-mask-image: url(mask-shape.png);
  mask-image: url(mask-shape.png);
}

Ques: What is CSS mix-blend-mode?

Ans: Defines how an element’s content blends with the background.

Example:

img {
  mix-blend-mode: multiply;
}

Ques: What is the difference between object-fit and object-position?

Ques: What are CSS Sprites?

Ans: A sprite combines multiple images into one file to reduce HTTP requests and improve performance.

Example:

.icon {
  background: url(sprite.png) no-repeat;
  background-position: -20px -40px;
}

Ques: How to create Image Galleries and Sliders using CSS?

Ans: You can use Flexbox or Grid for layout and transitions/animations for sliding effects.

Example (simple grid gallery):

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

Ques: How to create Tooltips using CSS only?

Ans: Use the ::after pseudo-element and position: absolute.

Example:

.tooltip {
  position: relative;
}
.tooltip::after {
  content: "Tooltip text";
  position: absolute;
  top: -30px;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 4px;
  opacity: 0;
  transition: 0.3s;
}
.tooltip:hover::after {
  opacity: 1;
}

Ques: How to style Buttons, Pagination, Navbars, and Dropdowns?

Ans: Use a combination of:

• border-radius
• box-shadow
• hover + transition
• display: flex or grid

Example (button):

button {
  background: linear-gradient(45deg, #007bff, #00d4ff);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  transition: 0.3s;
}
button:hover {
  transform: scale(1.05);
}

Ques: What are CSS Counters?

Ans: Counters are used to automatically number elements like lists or headings.

Example:

section {
  counter-reset: myCounter;
}
h2::before {
  counter-increment: myCounter;
  content: "Section " counter(myCounter) ": ";
}

Ques: How to Customize Scrollbars in CSS?

Ans: You can style scrollbars (mainly in WebKit browsers).

Example:

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(blue, purple);
  border-radius: 5px;
}

Ques: How to Change Cursor and Pointer Styles?

Ans: You can modify how the cursor appears when hovering.

Example:

a {
  cursor: pointer;
}
div:hover {
  cursor: crosshair;
}

Custom cursors can also be used:

cursor: url(cursor.png), auto;