Home/ Questions/Q 5848953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:55:55+00:00

The context is in a Mac’s Safari. I’m creating a HTML button that has

  • 0

The context is in a Mac’s Safari.

I’m creating a HTML button that has dynamic content. It can be “OK” “Cancel” or “I will come back later” depending on the scenario. The max-width property is set to 100px so that it does not grow too long and mess-up the layout. Whenever the button text is longer, the button loses its rounded corners. I’ve also discovered that the button loses its default style if its style is overridden by CSS… I just the need the button to behave as it is and accommodate the text without losing the rounded corners. Can anyone help me?

thanks in advance!

Added Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Button</title>
<style>
    button{max-width:150px;}
</style>
</head>
<body>
  <button id="test">Button has a long text to test its capacity</button>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Option 1: Update your Safari. I copy/pasted your exact code into a page and opened in Safari (just downloaded), and it has rounded corners. I also tried increasing the max-width to 300px, and it still works just fine – rounded corners and all.

    Option 2: Create buttons with rounded corners using HTML/CSS. THIS SITE is perfect for this – it lets you pick your options, then download the HTML/CSS for the exact button(s) you want – and it’s free. Of course you can then tweak the options yourself, or write it by hand, but – it’s a good starting place if you’ve not made rounded buttons before.

    • 0