Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .round-container { background-color: #e9ecef; border: 2px dashed #adb5bd; padding: 10px; border-radius: 8px; /* Start small, expand on hover */ width: 150px; transition: width 3s linear; cursor: pointer; } .round-container:hover { /* Smoothly grow to 400px */ width: 400px; } .round-box { background-color: #0d6efd; color: white; font-family: sans-serif; font-weight: bold; font-size: 0.9em; display: flex; align-items: center; padding-left: 15px; height: 60px; border-radius: 4px; white-space: nowrap; /* The box wants to be 100% of the container's width, but it is forced to round to the nearest 50px interval! */ width: round(100%, 50px); } </style> <div class="round-container"> <div class="round-box"> round(100%, 50px) </div> </div>