CSS User Interface · Resize and Outline Offset

Have you ever visited a website and noticed that a comment box could be stretched larger by dragging its corner? Or noticed that a focused input field had a glowing ring slightly separated from the element itself · not touching it, but floating just outside? Both of those effects are controlled by CSS User Interface properties.

In this lesson, you will learn two powerful CSS properties that directly improve the experience of people using your webpage:

• resize · lets you control whether a user can manually resize an element on the screen
• outline-offset · lets you control how far an outline sits from the edge of an element

These are small but mighty properties. Knowing them gives your web forms and interactive elements a polished, professional look and feel · exactly the kind of detail that separates beginner projects from professional ones.

What You Will Learn

By the end of this lesson, you will be able to:

1. Explain what the resize property does and why it exists
2. Use resize to allow horizontal-only, vertical-only, or both-direction resizing
3. Disable resizing entirely on a <textarea> element
4. Explain what outline-offset does and how it differs from the outline property itself
5. Set an outline that floats away from an element's edge
6. Use both properties together in a real-world form design

Before diving into this lesson, make sure you are comfortable with these ideas. If anything feels unfamiliar, take a moment to review the earlier lesson linked to each concept.

CSS Outlines (Lesson 39 · 40): An outline is a line drawn outside an element's border. Unlike borders, outlines do not take up space in the page layout. The outline property controls the style, width, and colour of that line.

The overflow property: When an element is resized by the user, its content may overflow its original boundaries. Setting overflow: auto or overflow: scroll ensures the element handles that extra content gracefully by showing a scrollbar when needed.

Block-level elements and <textarea>: A <div> is a generic block-level element · a rectangular box on the page. A <textarea> is an HTML form element where users can type multiple lines of text. Both can have the resize property applied to them.

1.1 · What Is It and Why Does It Exist?

Imagine you are filling in a feedback form on a Nigerian government portal. The comment box is tiny · barely two lines tall · but you have a lot to say. Frustrating, right?

The resize property was created to solve exactly that problem. It lets the web designer give users the ability to manually drag the corner of an element to make it bigger (or smaller). Think of it like the resize handle in the bottom-right corner of a window on your computer.

Why does this matter?

• Better user experience · users can expand text areas as needed
• Flexible forms · feedback boxes, address fields, and message areas all benefit
• Design control · you can restrict resizing to only one direction (width or height), preventing your page layout from breaking

1.2 · The Four Values of resize

The resize property accepts four possible values:

Important Rule: The resize property only works on elements that also have overflow set to something other than visible. You must set overflow: auto, overflow: scroll, or overflow: hidden alongside resize for it to work on most elements. A <textarea> is naturally resizable in most browsers without needing overflow, but it is still good practice to include it.

1.3 · Example 1: Resize Width Only (horizontal)

The scenario: You want a search filter box on your market price comparison site for Lagos traders. The box should expand sideways if the user needs more space, but the height must stay fixed.

<!DOCTYPE html>
<html>
<head>
<style>
 /* This div can only be made wider by the user */
 div {
 border: 2px solid #2c7a2c; /* Green border */
 padding: 15px;
 width: 300px;
 height: 80px;
 overflow: auto; /* Required for resize to work */
 resize: horizontal; /* Allow width resizing only */
 background-color: #f0fff0;
 font-family: Arial, sans-serif;
 }
 </style>
</head>
<body>
<h2>Lagos Market Price Filter</h2>
<div>Drag the right edge to make this box wider. The height will not change.</div>
</body>
</html>

Expected output in browser: A green-bordered box appears. The user can grab the bottom-right corner handle and drag it to the right to make the box wider. Dragging downward has no effect · the height stays fixed at 80px.

Think about this: What happens if you remove overflow: auto from the code above? Try it and observe whether the resize handle appears.

1.4 · Example 2: Resize Height Only (vertical)

The scenario: A student registration form on a university site in Abuja wants to let users expand the "Additional Notes" box taller, but the width must stay aligned with the rest of the form.

<!DOCTYPE html>
<html>
<head>
<style>
 div {
 border: 2px solid #1a3c6e; /* Dark blue border */
 padding: 15px;
 width: 350px;
 height: 80px;
 overflow: auto;
 resize: vertical; /* Allow height resizing only */
 background-color: #f0f4ff;
 font-family: Arial, sans-serif;
 }
 </style>
</head>
<body>
<h2>Student Registration – Additional Notes</h2>
<div>Drag the bottom edge downward to make this box taller. The width stays the same.</div>
</body>
</html>

Expected output in browser: A blue-bordered box appears. The user can drag the bottom handle downward to increase the height. The width stays locked at 350px no matter how the user drags.

1.5 · Example 3: Resize Both Width and Height (both)

The scenario: A general-purpose notes widget on a productivity app used by Nigerian professionals should allow full freedom · users can reshape it however they like.

<!DOCTYPE html>
<html>
<head>
<style>
 div {
 border: 2px solid #8b4513; /* Brown border */
 padding: 15px;
 width: 300px;
 height: 100px;
 overflow: auto;
 resize: both; /* Allow both width and height resizing */
 background-color: #fff8f0;
 font-family: Arial, sans-serif;
 }
 </style>
</head>
<body>
<h2>My Notes (Drag to Resize)</h2>
<div>You can drag this box to make it wider, taller, or both. Try it!</div>
</body>
</html>

Expected output in browser: A brown-bordered box with a resize handle in the bottom-right corner. The user can drag in any direction · sideways, downward, or diagonally · to reshape the box freely.

1.6 · Example 4: Disable Resizing on a <textarea> (none)

This is one of the most commonly used applications of resize. By default, most browsers let users drag and resize a <textarea>. This can break carefully designed form layouts. The fix is simple:

<!DOCTYPE html>
<html>
<head>
<style>
 /* Without this, users can resize the textarea in most browsers */
 textarea {
 width: 100%;
 height: 120px;
 padding: 10px;
 font-size: 14px;
 border: 2px solid #999;
 resize: none; /* Disable all resizing */
 font-family: Arial, sans-serif;
 }
 </style>
</head>
<body>
<h2>Leave a Comment</h2>
<textarea placeholder="Write your thoughts about the Jollof Rice festival here..."></textarea>
</body>
</html>

Expected output in browser: A text area appears where the user can type freely. However, the resize handle in the bottom-right corner is gone · the box stays exactly the same size no matter what.

Real-world use: Every professional contact form or feedback form you see on major Nigerian websites · from banks to e-commerce platforms · disables textarea resizing to keep the layout neat.

1.7 · Second Example of resize: none · Confirming the Concept

Let us see the same idea applied to a <div> so you understand that this is not textarea-specific:

<!DOCTYPE html>
<html>
<head>
<style>
 .fixed-box {
 width: 280px;
 height: 100px;
 border: 2px dashed tomato;
 padding: 10px;
 overflow: auto;
 resize: none; /* No resizing allowed */
 background-color: #fff5f5;
 }
 </style>
</head>
<body>
<h2>Fixed Announcement Box</h2>
<div class="fixed-box">
    This box is locked in size. Users cannot resize it. Perfect for fixed-size widgets like announcement panels.
  </div>
</body>
</html>

Expected output in browser: A dashed red-bordered box with no resize handle visible at all. The size is completely locked.