ios safari input border radius

Stop iOS styling your input fields and buttons

Apple iOS insists on styling up your buttons and input fields, but if you want to stop that then find out how.

So, you’re designed a lovely website only to find out Apple’s iOS decides it wants to take the design into it’s control by styling your input fields i.e. adding rounded corners and dropshadows to text fields and input buttons. Well, it’s a very simple fix. Just add this to any input fields or buttons you don’t want restyling…

Now, if you are using rounded corners in your CSS then you can can leave out the border-radius selector.

This is not the best way to do this as it certain things such as checkboxes will not display! It’s therefore best to target certain fields i.e.

15 replies on “ Stop iOS styling your input fields and buttons ”

Don’t forget input[type=”search”] or just use:

-webkit-appearance: none !important;

If you are still finding this on Google, you will need to add a few more input types to the rule above, such as:

[type=”email”] [type=”tel”] [type=”number”]

Wow that easy, had to add to Bootstrap 4!!

YOU ARE THE MAN

Does it works for select elements. As I have background color on select as well as options but they are not showing on ipad or iphone.

How do I apply this to checkboxes? EDIT: Better question since this can’t be applied to checkboxes. How do I fix stupid broken checkboxes on ios?

4 years late to the party, but I love you!

Great, Thanks a lot. This was What i was looking for!

Where should i add this in say i have a site with WordPress plugin Contact form 7? Newbie And also so it doesent change the font?

In your theme’s stylesheet

You beauty! I’d made a lovely looking site and then iOS was destroying the submit buttons… this worked perfectly, thank you!

No worries. Glad it worked.

Thanks for the tip! Worked perfectly 🙂

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

HTML email signature in Apple Mail

Step by step guide on how to add an HTML signature to Apple Mail.

FREE EU Cookie Law Script

If you haven’t already implemented the changes then we’ve put together a little bit of code to help you.

Secure your WordPress Blog

A guide to securing your WordPress website.

Remove the shadow from Mac Screen Grabs

How to remove the shadow from Apple Screengrabs.

10 Useful Sites for Web Developers

Some useful websites for web developers.

3 FREE Apps to protect your PC

A few free apps to help you protect your PC.

Web Browsing Tips #1: Find in Page

Find copy in page in a web page.

Web Browsing Tips #2: Tabbed Windows

Using tabbed windows in your web browser.

Web Browsing Tips #3: Keyboard Shortcuts

Some web browsing keyboard shortcuts.

Redirect your site the Search Engine Friendly way

Using a 301 redirect is important when you change your website URL or web page URL.

Remove the WordPress Meta Tag from your Blog

Remove the WordPress meta tag from your WordPress site with this small function.

Stay secure, use more than one password

We need passwords for everything, but how can we stay secure and have multiple passwords without having to remember them all.

Privacy Overview

• Skip to main content
• Skip to header right navigation
• Skip to after header navigation
• Skip to site footer

BizBudding Inc.

Remarkable Websites

Rounded Search Input Border in Safari and Mobile Devices

This is a tiny something that drives me absolutely bonkers. I cannot handle the way a search box renders on most mobile devices, and in Safari. More specifically: The Rounded Search Input Border in Safari and Mobile Devices. I *know*, you know what I’m talking about. Those perfect little input forms look magnificent on your desktop, then you visit your site on your phone or iPad and you see this…  

(  Check out our FUN! WordPress Theme here  ) I realize this may not make a normal person’s skin crawl, but it’s the web equivalent of nails on a chalkboard to me. Please do yourself me a favor and add this little nugget to the stylesheet of whatever theme you are using (check to make sure it’s not already there, first):

  Did you hear that? It was the sound of me taking a deep sigh of contentment, as I hop off my soapbox. Thank you.

While writing this blog post I also struggled with the usage of “off of” or just “off” (see above sentence). Google says I’m correct, but I just do not know ? The struggle is real and has migrated from input boxes to grammar. Send help.

Oh and please pin this to help spread the word so I can sleep a little more peacefully at night?

Download the How to Start Blogging Guide

Explore this FREE GUIDE to take a deep dive into how to start blogging to make money. Get a PDF version of this guide right to your email, plus weekly tips from our blogging experts at BizBudding.

WordPress Themes for SEO: How Templates Impact Ranking in Search Engines

WordPress Themes have a profound impact on your SEO, but many website publishers trust that all WordPress Theme vendors have made their themes SEO-friendly. Search Engine Optimization (SEO) is affected by so many factors, from content quality to SEO keyword research, to backlinks to readability, it is difficult to know what changes have had the …

Safari rounded outline issue

Hi guys! I have a problem with the outline in Safari. On my page in the form, I have an outline when you open the selector. This outline does not accept the rounded corners in safari. Can someone help me?

The link to the website: Website

hi @Noethi select border-radius: 2rem on selector__container if this doesn’t help (it should) you can add -webkit-border-radius: 2rem

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Join our free community Discord server here !

🤖 Level up your chatbot knowledge with our latest AI course.

🐸 What's happening at Treehouse? 💚

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here .

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

General Discussion

Kevin Korte

Ios safari rounded corners on input box, can't figure out how to remove..

Hello, so I'm finishing up launching a wordpress site, but I have this weird bug on Safari on an iOS device that I can't figure out.

The website in question is machinecheatsheet.com

On safari on my Macbook, the big search box over the image is fine. On my iphone that same search box has heavily rounded corners, and it doesn't work well with the intended design. So what's the deal?

I have searched and tried solutions from stack overflow which include

But it's not giving me any luck. Even when I disable my cache plugin, and verify by inspecting the code on my desktop browser that that bit of CSS is being rendered to browser, it doesn't make any change to the mobile safari version.

I'm sure it's something simple I'm probably forgetting, but what is it. Thanks!

Nick Pettit

Hi Kevin Korte,

Were you able to figure this out? If not, I would try looking into the selector specificity. An element selector (as you have in your example) can easily be overridden by a more specific ID selector.

If there's not an ID on your input already, try adding one and then using an ID selector to apply the styling, like this:

No I haven't yet. Been working on other things to tidy up. I am glad to see it appears I was on the right track. I never tried an id, I guess I was over thinking my selector choice. I'll try that tonight and report back.

Seems silly to not have thought of that myself. Thank you

louiecamacho

you can also specify the type like this

and if you are using a framework or something, you might be inheriting some css so just throw !important on there.

Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.

CSS3 rounded corner input

The CSS3 properties border-radius and box-shadow allow a designer to easily create rounded input boxes with pure HTML and CSS without having to resort to images. This post shows how it can be done and deals with vendor prefixes and other cross browser issues to ensure the input boxes work across all browsers.

What am I trying to achieve?

Here’s a screenshot taken from Chrome 10 on Mac Snow Leopard showing an HTML input box with rounded corners and a drop shadow using just CSS to syle it and no images:

And here’s the input in action. You can click into it and see the border change color as it gains focus. You’ll need Chrome, Safari 5+, IE9+, Opera 11+, FF 3.5+, iOS, Android for this to work correctly. See also below further notes about browser support.

If you are viewing this in a feed reader you might need to click through to view the article in a web browser for the input in action to work correctly.

Here’s the CSS to implement the above input box. Modify the border-radius value to make it more or less rounded and the box-shadow values to make the offset bigger or smaller and the shadow colour different, or remove the shadow altogether.

There’s plenty of notes in the CSS itself, but see also the table below for summarized information about browser support and also about the ratio of the border-radius for iOS devices.

Now all you need to do is assign the "rounded" class (or rename it to something else) to your input box like so:

Finally, here’s a condensed version of the CSS without all the comments:

Browsers tested/supported

The Mac version tested on was Snow Leopard.

Where it says "Prefixed" it means the vendor prefix is required, e.g. -moz-box-shadow

It would have been nice to have tested Opera 10.5 to see what support it offers, but I didn’t have it installed in any of my Virtual Machines and couldn’t be bothered tracking down a copy 🙂

Mobile Safari 4.0.4 was on an iPad 1 with iOS3.2 using the iPhone Simulator software; Mobile Safari 4.0.5 with iPhone 3/4 running iOS4 using the iPhone Simulator.

I also tested on Android 2.2 on a Samsung Galaxy S which was running "Version/4.0 Mobile Safari/533.1" which appears to have a more recent rendering engine than on iOS4. It worked fine using the CSS above, although it had a great big outline around the text box despite having outline: 0;

Browsers that don’t support border-radius

IE6/7/8 do not support border-radius so they’ll see a regular old rectangular input box. It will still work and as users of those versions finally drop off it won’t be an issue any more.

Mobile Safari and border-radius issues

Mobile Safari on the iPhone and iPad* have some rendering issues when it comes to border-radius which result in a line appearing just below the top border. Depending on the ratio of the radius to the height of the box it may appear the full width of the input or just inside it. Either way, it looks a little messy.

Thanks to this post on StackOverflow , it appears easy enough to solve: simply ensure the radius is no more than half the height of the input and add "-webkit-appearance: none;" as one of the properties to the style. Then it renders nicely.

(*and possibly Android. I didn’t test as by then it was working nicely on mobile devices).

Check Out These Related posts:

• border-radius and box-shadow support across browsers
• Style HTML Anchor Titles with jQuery and CSS
• Styling select, optgroup and options with CSS
• What Is a VPN?

November 2, 2018

Jeffery to in tech | november 2, 2018, no input zoom in safari on iphone, the pixel perfect way.

There is a question on Stack Overflow that I check from time to time, “ Disable Auto Zoom in Input ‘Text’ tag – Safari on iPhone “.

“Someday,” I would say to myself, “I’ll post my solution and write a blog post as well.”

That day has arrived.

What is the problem, exactly?

Sometimes in Safari (or any other browser built on UIWebView or WKWebView) on iPhone, if the user focuses a text input field, the browser will zoom in a little.

You can try this yourself in Example 1 (on iPhone, of course). (Full size screenshots: 1 , 2 )

(Screenshots in this post are from iPhone 7 Plus running iOS 11.4.1, resized from their original 3x size down to 1x and saved as JPEG. Full size links are to the original PNG files.)

The cause of this issue, as the top-voted Stack Overflow answer notes, is the font size of the input field text. If the font size is less than 16px, then Safari will zoom in when the field is focused. It does not matter if other units like em or rem are used, as long as the computed font size is less than 16px.

One might presume that Safari does this to make the text more readable, but this only occurs on iPhone and not iPad, where the same readability concerns may also apply.

What are the solutions so far?

Current Stack Overflow answers boil down to two approaches:

• Set the font size to 16px.
• Disable page zooming, by adding maximum-scale=1.0 and/or user-scalable=no to the <meta name="viewport"> tag.

Neither solution is free of trade-offs:

• Setting the font size to 16px sacrifices visual design. Increasing the text size for one element without adjusting other elements may disrupt the visual hierarchy of the page.
• Disabling page zooming hurts usability. There are many reasons why users want / need the ability to zoom in.

What do you suggest?

This is a method that trades CSS complexity for preserving visual design and maintaining usability. In essence:

• Style the input field so that it is larger than its intended size, allowing the logical font size to be set to 16px.
• Use the scale() CSS transform and negative margins to shrink the input field down to the correct size.

A concrete example

Suppose, as in Example 1 , the input field is originally styled as follows:

(Pixel lengths are used here for simplicity; relative units like em or rem are preferred for real world use.)

First, enlarge the input field by increasing all dimensions by 16 ÷ 12 = 133.33%:

Notice that the font size is now 16px, which will not trigger any zoom on focus.

Next, reduce the input field using the scale() CSS transform by 12 ÷ 16 = 75%:

You can see the result of this styling in Example 2 . (Full size screenshots: 1 , 2 )

Note that at this point, there is extra white space to the right and below the input field. This is because scale() only affects the field’s visual appearance; the field’s larger logical size remains unchanged.

Set negative margins to remove this extra space:

Example 3 contains this final styling: (Full size screenshots: 1 , 2 )

There will be notes

A few points to keep in mind:

• A 16px font scaled down to 12px will appear very close, but not identical, to the same font set at 12px. In particular, fonts usually have hinting that increases legibility at smaller sizes. Be sure to test the input field’s readability after applying this method.
• Other input field styles may also be affected, due to rounding in the enlarge-then-shrink process. For instance, a 1px border may end up appearing slightly thinner or lighter. (If you examine the full size screenshots above, you will note that the input field has become about 0.33px shorter in height.) This would not normally be noticeable to users but be sure to test the result.
• Due to the previous two points, I would suggest limiting this approach to iOS devices only. (Yes, with user agent detection if necessary.)
• Did I mention, be sure to test the result. 😜

Also, while researching for this post I came across this pen by Jakob Eriksen that exactly illustrates this technique. What can I say, great minds think alike . 😂

With a little CSS trickery, it is possible to implement a given design and avoid the input zoom issue in Safari at the same time. I hope to see this method used on more sites in the future.

P.S. If you liked this solution, please upvote my answer on Stack Overflow and help spread the word. Thanks!

Cancel Reply

Write a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

12 Comments

This solution was a life saver, and a very clever one. I will be bookmarking this. Thank you, Jeffery!

Use user-scalable=0 instead of user-scalable=no

What would be the difference?

But why we didn’t count both way? If we have input with font-size 14px We can set font-size to 16px Calc scale strength as 14/16 -> transform: scale(0.875); And calc scale for smaller styles already

For example for height: 25px We can count 16/14 -> height: calc(25px * 1.142857);

In the example, by enlarging line height and padding, the height of the input field is also increased. You could set an explicit (scaled up) height if you prefer.

Does this address your question?

wowww! its working pretty good, thank you so much!

2020 on the calendar. Any updates on this?

What kind of updates are you looking for?

Ran into this issue today, has anyone tried the ‘contenteditable’ approach?

Now this solution doesn’t work for safari on iOS. Are there any updates?

I have just retested the final example on iOS 13.5 and saw no issues. How is it not working for you?

As a 75% iOS Safari user, I need all the web dev reading this, lol, this zooming is so infuriating 😅

border-radius

You can give any element “rounded corners” by applying a border-radius through CSS. You’ll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it’s above.

Constituent properties

border-radius is what we call a “shorthand” property. That means it sets the following individual properties in a single declaration:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Logical properties

Those are referred to as “physical” properties because they set the radius according to the physical location of the corner (e.g. top-left). But border-radius is part of the Logical Properies and Values specification, meaning it has logical equivalents of the physical properties :

It’s a bit mind-bendy at first, but the order really matters, especially when working with border-radius as a shorthand. The order goes like this, where the first direction refers to the block direction and the second direction refers to the inline direction.

• Initial value: 0
• Applies to: all elements
• Inherited: no
• Computed values: pair of computed  <length-percentage>  values
• Animation: by computed value

The border-radius property takes between one and four length or percentage values, where one value sets the radius for all four corners at once, while four sets each individual corner.

So, if we wanted to set a different radius on the top-left and bottom-right but apply the same radius on the top-right and bottom-left together, we can use the three-value syntax:

Elliptical rounding ( / )

You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn’t have to be perfectly circular, it can be elliptical. This is done using a slash ( / ) between two values:

Note: Firefox only supported elliptical borders in 3.5+. Older WebKit browsers (e.g. Safari 4 and below) incorrectly treat 40px 10px the same as 40px / 10px .

The border-radius property can accept any valid CSS length unit . That means everything from px , rem , em , ch , vh , vw , and a whole bunch more are fair play.

You may specify the value of border-radius in percentages. This is particularly useful for creating a circle or ellipse shape , but can be used any time you want the border-radius to be directly correlated with the element’s width.

Note: In Safari percentage values for border-radius only supported in 5.1+. In Opera, only supported in 11.5+.

There are a few things to watch for when working with the border-radius property:

Clipped background images

If the element has an image background, it will be clipped at the rounded corner naturally:

Background color bleed

Sometimes you can see a background-color “leak” outside of a border when border-radius is present ( here’s a perfect example ). To prevent this you use the CSS background-clip property:

Overlapping border radii

Jay Sitter covered what happens when the value of one corner radius is so big that it overlaps the radius of another corner. Like this example, where we’re going for a “pill” shape on the right side with less rounding on the left:

We’re swtting a radius of 40px on the top-left and bottom-left corners, so why are they so boxy? That’s because the 999em value of the other two corners is covering them up. Jay digs deep into the math behind this and how to prevent it from happening, so it’s worth reading his article for more context.

Browser support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

It’s unnecessary now , but for the absolute best possible browser support, you could prefix the property with -webkit- and -moz- to ensure legacy browsers can join the fun:

Notice the order of those properties: the vendor prefixes are listed first and the non-prefixed “spec” version is listed last. This is the correct way to do it. Border radius is a particularly good example of why we do it that way. In slightly more complicated version of using border-radius (where you pass two values instead of one), the older -webkit- vendor prefix would do something entirely different than the “spec” version. So, if we blindly copy-and-paste the same values to all three properties, we could see different results cross-browser . For the most consistency long-term, it’s best to list the “spec” version last.

It’s pretty realistic these days to drop prefixes and just use vanilla border-radius , as discussed here .

Here’s each individual property, with vendor prefixes:

Each of these values can have a space-separated value as well, like 5px 10px , which behaves the same as a slash-separated value in shorthand ( <horizontal-radius> [space] <vertical-radius> ).

Related tricks!

(better) tabs with round out borders.

Body Border, Rounded Inside

Border radius on images, conditional border radius in css, css border-radius can do that.

Creating CSS Shapes with Emoji

Do we need box-shadow or border-radius prefixes anymore?

Other looks at the conditional border radius trick, outer border radius tabs, rounded corners, shape blobbing in css, tabs with round out borders, using css to set text inside a circle.

Various Methods for Expanding a Box While Preserving the Border Radius

Well Rounded: Compound Shapes in CSS

background-clip

Border-collapse, border-image.

border-spacing

Nice tutorial!

Is this up to date? I’m not seeing a post-date anywhere.

Anyway. Nice tutorial!

Last updated on: MAY 13, 2013

MARCH 19, 2012

LAST UPDATED ON: MAY 13, 2013

That was really classy.. Tnx

They are not looking alright at all on Android 2.2 and 2.2.1. The default browser.

Your website isn’t even loading hoss

Hello, I indeed absolutely needed some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:

-webkit-box-shadow: 0 0 1px #000;

The x and y position of the shadow are 0 so the shadow is centered, all wee need is to adjust the blur value expanding it just 1px (in base of need) above the corner edges making them look smoother. Of course the shadow color must be the same as your rounded element’s background/border-color…

There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.

Now, if you are the type of designer that can use small compromises, it should just work for you like this, but if you are a finicking freak like I am, you should absolutely find a way to target your CSS to specific devices.

At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least preventing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:

@media only screen and (-webkit-device-pixel-ratio:.75){ /*for low density (ldpi) Android layouts */ }

@media only screen and (-webkit-device-pixel-ratio:1){ /*for low density (ldpi) Android layouts */ }

@media only screen and (-webkit-device-pixel-ratio:1.5){ /*for low density (ldpi) Android layouts */ }

Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer ;)

NIce. Thanks for help :)

If you’re still reading comments, I would love to know why this is not working on my site. I have a drop down menu under “photos” and as can be seen when first hovering the corners are rounded but then they revert back to square corners. I don’t see any errors in the way I’ve formatted the corners and oddly it was working until I changed the border color, then it stopped.

http://danielpaymar.com

mainMenu.ddsmoothmenu ul li ul{

Nice tutorial. Aptly explained. You went beyond most other tutorials and explained things others only dream about. Thanks.

that’s some badass you got over there. nice tut, btw thanks

Hi , I am trying to apply border-radius to div,which have border with gradient color. But it is not allowing me to apply border-radius.

Below is my code snippet.

.border:nth-child(1) {border-image: -webkit-linear-gradient(#000, #fff) 14% 14% 14% 14% stretch; } .border{ border-radius:15px; -webkit-border-radius:15px; } .border {display: inline;float: left;margin: 15px;position: relative;border-width: 20px;width: 160px;height: 160px;}

Lorem Ipsum

how supported IE 6,7,8 Browser. please post your comments

OMG that green color used in the example is “BADASS” in hex value!!! – #BADA55

Thanks for the tutorial! Is there any possibility to access the “whitespace” clipped by border-radius ? f.ex. to change its color to different than the background.

Thanks for another great tutorial!

I just took what I learned and took it a step further to keep rounded corners proportional on responsive images.

A 15 px border radius at 100% on a square image would be

border-radius: 5%

To achieve the same on a 300px x 650px it would be

border-radius: 2.31%/5%

This is calculated by dividing the pixel radius by the width and the height. The corner will be perfectly rounded and stay proportional to the image size when it is scaled.

That is actually what I searched for. Thank you a lot! Author need to include this comment into article.

Hi Chris, I really appreciate your work and the assistance help you offer. Hope you can help on this one…I am working on round corners for a while and I face a problem with images in the background of a div and round corners with opacity values for the border. It works in firefox but Safari always shows the image up to the outer edge. Do you have an idea how to fix it? Here is the code: div { height:250px; width:250px; background-image:url(image.jpg);} .round { border-radius: 60px; /* Prevent background color leak outs / border: 20px solid rgb(18, 50, 51); border: 20px solid rgba(18, 50, 51, 0.9); -webkit-background-clip: padding-box;/ for Safari / -moz-border-radius:360px;/ Firefox – alte Syntax */ }

please just i ask that same css work on background image if that work then how!

Using percentages is perfect for a responsive CSS Circle, but having it break below iOS 5.0 is a problem I’m having.

Is there a good workaround regarding the lack of support for Border Radius Percentages that you noted specifically in relation to responsive website development?

it not woring in IE9

Thank you So much

There is a bug in the Samsung Galaxy S4 default android browser. That the you have to use

http://stackoverflow.com/questions/17944749/border-radius-style-doesnt-work-in-android-browser

how bout on ie8

Awosome…..Thanks

Fantastic !, thanks.

padding: 5px 0 5px 5px; width: 100%; background-color: rgb(73, 180, 31); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

When I introduce padding in my div, it loses the rounded corner, just shows two rounded corners in the left and the right side corners are left square, how can l display all of my corners rounded?

i see this post in my mobile samsung galaxy y android v.2.3 and all examples look good but when i use the border-radius in my site the image look square i’m confuse i don’t understand what happend, i apply border radius direct to the image element… some idea? this is my css img{ -webkit-border-radius:50%; -moz-border-radius:50%; border-radius: 50%; -webkit-box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5); -moz-box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5); box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5); }

Simple and sample.Yeah

this is working nice, but cannot use border-radius on a canvas element on any Samsung S2 / S4 native browser

Regards, Iskren

Check out CanIUse.com – it will show what browsers the code will work with and with what versions.

Thank alotzz…

Is there a way to change the border radius based on a keyframe animation? for instance at 20% make the radius 5%, 50% = 20%, 75% = 30%, 100% = 50%…

Absolutely!

Hello guy! I just wanted to thank you guys for your enormous efforts that made Css-tricks into one of the best css and front end development references on the web.

http://mirchu.net/material-design-icons/ its help full for u.. css material design icons

thank you, this is so helpful . xx

Great, and it’s badass color man.

I’m glad I wasn’t the only one who noticed

Now the modern browsers almost support border-radius with single line instead of prefix (-webkit, -moz, -o) and I think we should partially remove prefix for future projects, one more thing that if you are still interested in shape and prefix CSS, let make it easier to set by dropping by my webtool: http://mystorage.biz/ Then give me your opinion. Thanks

Thanks a lot. very helpful

Really It’s Super And So Helpful. Thanks

Currently browsing in an Android 2.0.2 native’s browser (this is a really un-updated browser, would not evem handdle any transition at all, bugging most of the pages with an add banner on top). Surprisingly, box shadows seems to work in all cases except when.there’s a percentage value. I will try with the -webkit- prefix and will post if that’s working. Ps: nice read, thanks for the quality content.

I meant border radius, not box shadows :-

Thanks so much!!!!!! :) I used border-radius: 0px 50px 50px 0px; and Work it!

Thank you, it’s great tutorial. You can see the css results by using the border-radius builder on this page: https://css-tools.com/border-radius

I really don’t understand the reasoning for the rules for 2 values. Why not match padding and margins? 2 values = top and bottom.

When we give two values in border-color then first one get applied to top and bottom and second value get applied to right and left. You have mentioned that wrong. Please check that.

When using border radius some time sharp border shows. how to fix as smooth border?

I have a challenge : Make border-radius scale nicely by a factor relative to the width of the container keeping the circle aspect even on rectangle elements (I mean keeping them from ‘going’ elliptical)

✨ Ana’s got you covered: https://css-tricks.com/various-methods-for-expanding-a-box-while-preserving-the-border-radius/

Hi, I wonder if there is a way to give a div a border with a pointy end.

So like this:

| \ |______/

Is there a way to do this in HTML?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outline and Border-radius are ignored on Safari #662

hiddevdploeg commented Jun 27, 2019

cdata commented Jun 28, 2019

• 👍 3 reactions
• 🎉 2 reactions
• 🚀 1 reaction

Sorry, something went wrong.

cdata commented Jul 30, 2019

Ramzes-org commented Feb 21, 2023

• 👍 1 reaction
• 👎 1 reaction

nolimitdev commented Mar 2, 2023 • edited

• 👍 2 reactions
• 🎉 6 reactions
• ❤️ 7 reactions

No branches or pull requests

[Resolved] Border Radius issue on Safari

Home › Forums › Support › [Resolved] Border Radius issue on Safari

Popular Articles

• Missing style.css

Updating errors

• Installing GP Premium

Installing GeneratePress

How to add CSS

How to add PHP

Home › Forums › Support › Border Radius issue on Safari

• Author Posts

Hey Folks! I need a small help. On my website https://www.apssb.in I use a Search Form in Footer Widgets Section with the following CSS to make it look round:

It works flawlessly in Firefox, Edge, and Chrome but looks off in Safari.

^ Working fine in Edge, Chrome, and Firefox.

^ Doesn’t work as expected in Safari

what you’re seeing there is a browser style that needs disabling. Try adding this to remove it:

Thank you very much, David. It was easy 🙂

Glad to be of help

• You must be logged in to reply to this topic.

Start building better websites today.

GeneratePress

• Site Library
• Brand Assets
• We’re Hiring!
• Documentation
• Support Forums
• Archived Support Forums
• Fastest WordPress Theme
• Install GeneratePress
• Plugin Install Failed
• WordPress Hosting

© 2024 EDGE22 Studios LTD.