Curved Button Outline CSS in HTML

Question

I want to make outline around button. But as default instead of curved it is coming as a rectangle shape. Please guide me to make curved rounded outline using CSS.

Thanks

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   input {
       border: 2px solid #a1a1a1;
       padding: 10px 40px; 
       background: #dddddd;
       width: 300px;
       border-radius: 25px;
       outline : 2px solid red;
   }
   </style>
   </head>
   <body>

          <input type="button" value="Button" />

   </body>
   </html>

Possible duplicate of [Outline radius?](http://stackoverflow.com/questions/5394116/outline-radius) — Jon Uleis, Dec 27 '16 at 06:24

score 2 · Answer 1 · answered Dec 27 '16 at 06:28

You can try giving box-shadow instead of outline. Like:

input {
  border: 2px solid #a1a1a1;
  padding: 10px 40px; 
  background: #dddddd;
  width: 300px;
  border-radius: 25px;
  box-shadow: 0 0 3px red;
}

Have a look at the snippet below:

input {
   border: 2px solid #a1a1a1;
   padding: 10px 40px; 
   background: #dddddd;
   width: 300px;
   border-radius: 25px;
   box-shadow: 0 0 5px red;
}

<html>
<body>
  <input type="button" value="Button" />
</body>
</html>

Hope this helps!

As per my Guideline instruction i should not use box-shadow. without box-shadow i should be do the outline. — Velmurugan, Dec 27 '16 at 07:19

score 1 · Answer 2 · answered Dec 27 '16 at 06:28

Natively this is not possible. Firefox has a property -moz-outline-radius but is not supported by all browsers.

You can check out this article for help with multiple borders, it has various techniques.

https://css-tricks.com/snippets/css/multiple-borders/

score 0 · Answer 3 · answered Oct 15 '22 at 06:07

try this instead, create a class called outline-button

<!DOCTYPE html>
   <html>
   <head>
   <style> 
   .outline-button {
       border: 2px solid #a1a1a1;
       padding: 10px 40px; 
       background: #dddddd;
       width: 300px;
       border-radius: 25px;
   }
   </style>
   </head>
   <body>

          <input class ="outline-button" type="button" value="Button" />

   </body>
   </html>

Papa Tom · Answer 4 · 2016-12-27T06:25:52.597

-1

border-radius will do the trick.

RE: It is because of the outline try to remove that line.

edited Dec 27 '16 at 06:25

answered Dec 27 '16 at 06:24

Papa Tom

31
5

1

OP is using `border-radius` in the post! – Jon Uleis Dec 27 '16 at 06:24
1

Still not helpful. OP is asking how to style `outline` and you told them to remove it. – Jon Uleis Dec 27 '16 at 06:27

Curved Button Outline CSS in HTML

4 Answers4