What are some techniques for achieving smooth edges on CSS border shapes?

Could someone help me with this issue I'm facing in CSS? My screen shot shows blurred edges on the top-left side, and as a CSS beginner, I'm not sure how to fix it. Any solutions?

https://i.sstatic.net/1mJUj.png

.shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #9966ff;
  outline: 1px solid transparent;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
}
.shape:after {
  content: '';
  border-right: 1500px solid rgba(0, 0, 0, 0);
  border-top: 250px solid rgba(255, 255, 255, 1);
  border-left: 1500px solid rgba(255, 255, 255, 1);
  float: right;
}
<div class="shape"></div>

htmlcss

Answer №1

.shape {
  position: absolute;
  width: 100%;
  /*height: 100%;*/
  top: 0;
  left: 0;
  background-color: #9966ff;
  outline: 1px solid transparent;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
  border-radius: 56px;
}
.shape:after {
  content: '';
  border-right: 1500px solid rgba(0, 0, 0, 0);
  border-top: 340px solid rgba(255, 255, 255, 1);
  border-left: 1500px solid rgba(255, 255, 255, 1);
  float: right;
}
<div class="shape"></div>

Answer №2

Apply a border-radius of 15px to the inner shape.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Localhost causing variations in CSS behavior

I've been working on a website and wanted to share it with someone, so I set up a webserver. However, I've encountered some peculiar behavior when trying to access the site via LAN rather than through my localhost. Firstly, when viewing the site ...

csslocalhostfont-face

Ways to maneuver the vehicle by using the left or right key inputs

I am a beginner with canvas and game development. I am currently working on a project where a car moves in a straight line, but I want to add functionality for the car to turn anti-clockwise when the left key is pressed, and clockwise when the right key is ...

javascripthtmlcanvas

Ways to Adjust the Text Size within Table Cells

I'm having trouble changing the font size in my table. I've tried adding the font size in the HTML tag, as well as in the CSS code for the Myposts class, but so far nothing has worked. Do you have any suggestions on how to successfully change the ...

phphtmlcssfontshtml-table

Executing a custom object function in AngularJS by using the ng-click directive

As I navigate my way through AngularJS, I find myself grappling with the concept of calling a custom method of an object and wonder if there's a simpler approach: https://jsfiddle.net/f4ew9csr/3/ <div ng-app="myApp" ng-controller="myCtrl as myCtr ...

javascriptjqueryhtmlangularjs

Creating custom style sheets in Smarty

The formatting of a template processed in Smarty is being lost Previously (viewed in notepad++): <!DOCTYPE html> <html lang='ru'> <head> Now (displayed in the browser): <!DOCTYPE html><html lang='ru'&g ...

phphtmlsmarty

Switching between various dropdown options does not produce any noticeable differences in the (React) interface

I am experiencing an issue with my dropdown menu where selecting different values no longer triggers any changes. This was working perfectly fine before. Below is the code I am using: context.js: import React, { useState, useEffect } from 'react&apo ...

javascripthtmlreactjsdrop-down-menustate

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

javascriptcssvue.jsvuejs2

Django Ajax button fails to add item on initial click

My Django project features a dynamically rendered table for order items on the Cart page. Each item in the table displays the quantity, product name, total price, and more. To modify the quantity, I've implemented "add" and "subtract" buttons. Below i ...

pythonhtmljquerydjangoajax

Issues arise when using ng-repeat in conjunction with ng-click

I am facing some new challenges in my spa project with angularjs. This is the HTML snippet causing issues: <a ng-repeat="friend in chat.friendlist" ng-click="loadChat('{{friend.friend_username}}')" data-toggle="modal" data-target="#chat" d ...

javascripthtmlangularjs

The Mysteries of Key Codes in JavaScript

I'm curious about the character codes used for keyboards. Recently, I came across an informative article discussing this topic. In particular, I am interested in finding out which key code to use when a user presses both the alt and down arrow keys s ...

javascripthtml

Can we use CSS to animate the enlargement of an element without moving it?

Take a look at this jsFiddle. With CSS animations gaining popularity, I am interested in creating an effect where an element (.box) expands with an animation when the mouse hovers over it. The challenge is to keep the center of the element fixed while enla ...

animationcss

Display immersive full-screen overlays that encompass the entire vertical space without the need for scrolling

Recently, I ran into a challenge while attempting to create a CSS print style-sheet. The issue arose when I tried to print a full-screen overlay containing scrollable content. Only the content that was currently displayed would show up in the printed ver ...

cssprintingoverlay

Incorporate elements into HTML with the help of HtmlAgilityPack

Is there a way to add another tag after a specific tag and eliminate a tag from HTML code? For instance, consider the following HTML snippet: <p class="cs40314EBF"><span class="cs1B16EEB5">This is an ordinary text.</span></p> The ...

c#htmlhtml-agility-pack

Craft a CSS triangle shape from scratch

Looking at the image of a blue triangle, I am curious about how to recreate it using CSS. Would using a background image be the best approach, or is there a way to achieve this with CSS transforms? I noticed the triangle is on the left side but not on the ...

csstransformtransformation

Documents are not stored in cache

Using the cache.manifest file, I am able to view my project offline and everything works perfectly. However, the only issue I'm facing is that the libraries for my gallery slider are not being cached, and I'm not sure why. Can anyone lend me a ...

javascriptjqueryhtmljquery-mobile

What is the best way to ensure that the text input spans the entire width of the div in Bootstrap 4?

I am currently exploring the implementation of Bootstrap 4. I have a basic div that includes a text box, and my goal is for the text box to occupy the full width of the div. Initially, I assumed that in Bootstrap, input elements automatically inherit the f ...

csshtmlinputbootstrap-4

Is it considered acceptable to include a stylesheet inside the <body> element?

When dividing my web pages into sections, such as headers and content, I find it challenging to avoid placing links to external stylesheets within the <body> tags. I prefer not to combine all styles into one large file or include all stylesheets in ...

htmlcss

PHP and mysqli combine to create a versatile image slider with changing images

I am looking to implement an image slider that can be updated by the admin using php and mysqli. The admin should have the ability to easily add or remove images as needed. ...

phpjqueryhtmlcss

What is the best way to ensure that the page reloads every time I access it

Creating a social networking website and working on a post edit page. However, encountering an issue when finishing editing the post and clicking 'SAVE EDIT'. I am using the code window.location='post_info.php?post_id='+postid; with AJA ...

javascriptjqueryhtml

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

csshtml