border radius rounded corner with css only

Question

enter image description here

Can I achieve this with css only?

50% does not work on rectangle

1 more thing: no fixed height.

You can set a min-height to the element if you don't need to fix the height. — anpsmn
– anpsmn, Commented Mar 27, 2015 at 8:21
This is how I would do it: jsfiddle.net/lharby/5sanz08e and don't forget the vendor prefixes. — lharby
– lharby, Commented Mar 27, 2015 at 8:55
@lharby It fails when the content of the box is large: jsfiddle.net/5sanz08e/2 — Besides, nowadays using vendor prefixes is not necessary for border-radius. — Hashem Qolami
– Hashem Qolami, Commented Mar 27, 2015 at 9:00
This related question might help stackoverflow.com/questions/29048234/… althought it is for a fluid with rather than fluid height. — web-tiki
– web-tiki, Commented Mar 27, 2015 at 9:03
Is it specified in the question that there will be text content inside the div? — lharby
– lharby, Commented Mar 27, 2015 at 9:04

Hashem Qolami · Accepted Answer · 2015-03-27 08:35:10Z

5

One option is to set a fixed value for horizontal border-radius as follows:

div {
  display: inline-block;
  border-radius: 50px / 50%;
  
  padding: 1em 2em;
  border: 2px solid #000;
  background-color: #009EE0;
  text-align: center; 
}

<div>
  Stuff goes <br>
  here... <br>
  & here... <br>
  Setting a fixed value of horizontal border-radius does the trick!
</div>

You may also want to use a different percentage value instead:

div {
  display: inline-block;
  border-radius: 12% / 50%;

  padding: 1em 2em;
  border: 2px solid #000;
  background-color: #009EE0;
  text-align: center; 
}

<div>
  Stuff goes <br>
  here... <br>
  & here... <br>
  Or set a different percentage value for horizontal border-radius
</div>

answered Mar 27, 2015 at 8:35

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akshay · Accepted Answer · 2015-03-27 08:21:19Z

2

Try this

div{
    width:200px;
    height:100px;
    background:lightblue;
    border-radius:50px;
  border:2px solid black
}

<div></div>

Edit: use 50vw for making it responsive any height will be okay

div{
    width:500px;
    height:300px;
    background:orange;
    border-radius:50vw;
}

<div></div>

edited Mar 27, 2015 at 8:21

answered Mar 27, 2015 at 8:17

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

8 Comments

Timeless Over a year ago

Can I achieve this on a rectangle without a fixed height.

Akshay Over a year ago

@Timeless No fixed height??

Akshay Over a year ago

@Timeless Do you have text in it?

maam27 Over a year ago

@Timeless the css he posted is not wrong in the example there is a fixed height, but you could just as good use something as height:auto;. Since the question was about the rounded corners and all that awnsers that would be border-radius:50px;. For more information about it please take a look here.

Akshay Over a year ago

@maam27 Check this fiddle i used 50px but it doesn't give a nice effect so i used 50vw

|

web-tiki · Accepted Answer · 2015-03-27 09:43:57Z

1

There is a trick for that

Just us a very large border-radius value!

e.g. {border-radius:10000px;}

Here is link to demo (Try changing width/height to see working) : http://jsfiddle.net/890z699p/

.rect {
  width: 300px;
  height: 200px;
  background: #000;
  border-radius: 10000px;
}

<div class="rect"></div>

edited Mar 27, 2015 at 9:43

web-tiki

104k33 gold badges226 silver badges258 bronze badges

answered Mar 27, 2015 at 8:49

demonofthemist

4,1894 gold badges29 silver badges46 bronze badges

2 Comments

web-tiki Over a year ago

This will work, the problem is that your fiddle uses percentages for border-radius instead of a hight px value as you show in your answer. Also, please add the code of your example in the question itself.

demonofthemist Over a year ago

@web-tiki Thanks for pointing out mistake! I didn't updated the jsFiddle :D, It is fine now!

Muarif · Accepted Answer · 2015-03-27 08:21:59Z

0

It works on me, below is my code snippet

div {
  display: block;
  border-radius: 50%;
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  background-color: #009EE0;
}

<div>
</div>

answered Mar 27, 2015 at 8:21

Muarif

2182 silver badges10 bronze badges

1 Comment

Hidden Hobbes Over a year ago

You may want to double check your final result, the OP wants a rectangle with rounded corners, this code produces an oval.

Amit Kumar · Accepted Answer · 2024-08-23 06:21:11Z

0

#rec{
  height: 15vh;
  width: 20vw;
  background-color: #009EE0;
  border: 2px solid #16100E;
  border-radius: 5vw;
}

      <div id='rec'/>

just use the border-radius which suits your design

answered Aug 23, 2024 at 6:21

Amit Kumar

1

Collectives™ on Stack Overflow

border radius rounded corner with css only

5 Answers 5

Comments

8 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

8 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related